Make text height 100% of div?

问题:

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.

回答1:

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!

回答2:

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

Check these:

1. http://fittextjs.com/
2. Have font size change according to size of div
3. resize font to fit in a div

回答3:

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.

回答4:

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;
}

回答5:

You can do it for single line texts using relative and absolute positions:

<div class="div">
  <span class="middle-center">
    Center text
  </span>
</div>

css:

.div {
  height: 4%;
  position: relative:
  overflow: hidden;
}

.middle-center {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  margin-top: -8px;
} 

回答6:

try this

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