让文字高度的div的100％？(Make text height 100% of div?)

我试图做一个文本100％高度div但它不工作。
它只是变成了100％的body { font-size:?; } body { font-size:?; } 。

有没有什么办法让它跟随DIV高度？
该div高度是整个页面的4％，我wan't文本跟随它，当你调整大小/分辨率的变化。

Answer 1:

为了得到我想要的结果，我不得不使用此代码：

// 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');​

谢谢joshuanhibbert @ CSS-技巧的帮助！

Answer 2:

使用CSS，你不能做到这一点。 取而代之的是使用JavaScript。

检查这些：

1. http://fittextjs.com/
2. 根据格的大小有字体大小变化
3. 调整字体以适应一个div

Answer 3:

在2015年，您可以使用视台 。 这将允许您设置字体大小在代表视高度的1％的高度单位。

所以你的情况font-size: 4vh会达到预期的效果。

注意：这不会是相对父DIV，你问了，但是相对于视高度。

Answer 4:

如果你想只使用CSS的div 100％大小的文字，则必须更改字体大小和行高属性。 这里去我的解决方案：

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

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

Answer 5:

您可以使用相对和绝对位置单行文本做到这一点：

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

Answer 6:

试试这个

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

文章来源: Make text height 100% of div?