Make text height 100% of div?

Question

I'm trying to make the text 100% height of a div but it doesn't work.
It just becomes 100% of the body { font-size:?; }.

Is there any way to make it follow the div height?
The div height is 4% of the whole page and I wan't the text to follow it when you resize/change resolution.

Are you wanting to do this through CSS or could you have a JS function to set the font size based on the div height? — Dan Lister, May 23 '12 at 11:23
I might use javascript, but since I have almost no knowledge about it, I'll need some guidelines. — Daniel, May 23 '12 at 11:56

score 11 · Accepted Answer · edited Jan 30 '17 at 18:21

11

To get the result I wanted, I had to use this code:

// Cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('li.leaf.item');

// Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
   // Get the current height of the div and save it as a variable.
   var height = $div.height();
   // Set the font-size and line-height of the text within the div according to the current height.
   $div.css({
      'font-size': (height/2) + 'px',
      'line-height': height + 'px'
   })
}).trigger('resize');

Thank you joshuanhibbert@css-tricks for the help!

edited Jan 30 '17 at 18:21

T.Gounelle

5,953
1
22
32

answered May 24 '12 at 10:41

Daniel

1,525
4
12
17

there should be javascript lib that allows custom css unit which give more options. Like fit content, fill parent. % height of parent. etc. – Muhammad Umer Mar 29 '15 at 16:13
+1 for the concept. I was being dumb by trying to determine the rate at which it changed and then change the font size by the same rate. Easier to just do simple math like this. – Shmack Jul 03 '20 at 19:39

score 5 · Answer 2 · answered Aug 12 '15 at 11:43

5

In 2015, you can use viewport units. This will allow you to set the font size in height units representing 1% of the viewport height.

So in your case font-size: 4vh would achieve the desired effect.

Note: this wouldn't be relative to the parent div, as you asked, but relative to the viewport height.

answered Aug 12 '15 at 11:43

andyError

51
1
2

Viewport units are still buggy. Maybe a year (a half of the year I hope) from now its support will be sufficient – instead Oct 18 '15 at 15:44

score 4 · Answer 3 · edited May 23 '17 at 12:30

4

Using CSS you cannot achieve this. Instead of that use javascript.

Check these:

edited May 23 '17 at 12:30

Community

1
1

answered May 23 '12 at 11:26

Libin

2,442
3
20
31

I can't get any of this to work. It is the menutext that I want to rezise. It looks like this: `
- Menu1
` The cnt-main-menu has height of 4% of the whole page. How am I going to use the fittextjs to make the text follow the cnt-main-menu box?
– Daniel May 23 '12 at 11:50
Read this: [fittext usage](https://github.com/davatron5000/FitText.js/blob/master/README.md) – Libin May 23 '12 at 12:59
All of those links are for resizing relative to width, not height. – Muhd Apr 11 '14 at 01:38

score 2 · Answer 4 · answered Oct 05 '16 at 15:22

If you want a text with 100% size of the div using CSS only, you must change the font-size and line-height properties. Here goes my solution:

.divWithText {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    text-decoration: bold;
    color: black;

    height: 15vh;
    font-size: 15vh;
    line-height: 15vh;
}

score -7 · Answer 5 · edited Jul 15 '12 at 10:26

-7

try this

font
{
  position:absolute;
  width:100%;
  height:100%;
  font-family:Verdana, Geneva, sans-serif;
  font-size:15px;
  font-weight:normal;
}

edited Jul 15 '12 at 10:26

akjoshi

15,374
13
103
121

answered May 23 '12 at 11:37

CSS Guy

1,978
3
18
27

4

This sets a fixed font size. – sdasdadas May 06 '13 at 20:50

Make text height 100% of div?

5 Answers5

Linked

Related