使文本高度占据div的100%？

Question

使文本高度占据div的100%？

csstextfontsheight

15

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

有没有办法使它遵循 div 的高度呢？
这个 div 的高度是整个页面的4％，我希望在调整大小/更改分辨率时文本也能跟随它。

- Daniel

1

你想通过CSS实现这个功能还是可以使用JS函数根据div高度设置字体大小？ - Dan Lister

我可能会使用JavaScript，但由于我几乎没有关于它的知识，所以我需要一些指导。 - Daniel

5个回答

5

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

因此，在您的情况下，font-size: 4vh将实现所需的效果。

注意：这不会相对于父div，而是相对于视口高度。

- andyError

视口单位仍存在错误。也许一年后（我希望半年内）它的支持将足够。 - instead

4

使用CSS无法实现这一点。取而代之，请使用javascript。

请查看以下内容：

- Libin

我无法让任何一个东西工作。我想要调整menutext的大小。它看起来像这样：`<ul class="cnt-main-menu">\n <li class="item"><a href="/">Menu1</a></li>\n</ul>` cnt-main-menu 的高度占整个页面的 4%。我该如何使用 fittextjs 让文本跟随 cnt-main-menu 盒子？ - Daniel

阅读此内容：fittext使用方法 - Libin

所有这些链接都是针对宽度而不是高度进行调整大小的。 - Muhd

2

如果您想要使用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;
}

- José Lozano Hernández

-7

试一下这个

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

- CSS Guy

4

这会设置一个固定的字体大小。 - sdasdadas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel · Accepted Answer

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

// 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的帮助！