css - 使文本高度为 div 的 100%？

Question

我正在尝试将文本设置为 a 的 100% 高度，div但它不起作用。
它只是成为 100% 的body { font-size:?; }.

有没有办法让它跟随 div 高度？高度是整个页面的 4%，当您调整大小/更改分辨率时，我不想让文本跟随它
。div

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

感谢 josuanhibbert@css-tricks 的帮助！

Answer 2

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

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

注意：正如您所问的，这与父 div 无关，而是与视口高度相关。

Answer 3

使用 CSS 你无法做到这一点。而不是使用javascript。

检查这些：

1. http://fittextjs.com/
2. 根据 div 的大小改变字体大小
3. 调整字体大小以适应 div

Answer 4

如果您想要仅使用 CSS 的 div 大小为 100% 的文本，则必须更改 font-size 和 line-height 属性。这是我的解决方案：

.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

试试这个

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