使文字高度达到div的100%？

Question

我试图使文本100%的高度,div但它不起作用.
它只是100%的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-tricks的帮助!

Answer 2

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

所以按照你的情况font-size: 4vh就会达到想要的效果。

注意：正如您所要求的，这不是相对于父 div 的，而是相对于视口高度的。