根据字体大小设置 <div> 高度？答案

【问题标题】：Set <div> height based on font size?根据字体大小设置 <div> 高度？
【发布时间】：2018-11-04 01:57:15
【问题描述】：

我有一个在 WebView 中显示单个 HTML 文件的 Java 应用程序。

以下 CSS sn-p 用于设置该网页中 <div> 的样式：

.header {
    margin: auto;
    background-color: #0479ccff;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    height: 20px;
}

但是，<div> 中文本的字体大小可由应用程序用户调整，因此我需要一种方法来缩放 div 相对于字体大小的高度。对于较大的字体，<div> 的高度保持不变，并且文本与其底部边框重叠。

有没有办法用纯 CSS 做？

【问题讨论】：

看来内容的大小可以决定.header、like this的高度。是这个意思吗？
如果您创建一个working example 来帮助演示，可能会有所帮助。 .header 是什么元素？
这与 Java 有什么关系？
是的，它没有.... 真的是标签，但是 .
我将其标记为 Java，因为它使用的是 Java WebEngine（如问题中所述），并且它的行为可能与预期不同。

标签： java html css

【解决方案1】：

以em 而非像素为单位指定高度。然后，随着字体大小的变化，高度也会自动变化。

.header {
    margin: auto;
    background-color: #0479ccff;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    height: 1.8em;
}

【讨论】：

我也经常使用em 单位来保持元素的比例，而不管字体大小。但是，在这种情况下，似乎较大的字体可能会比较小的字体换行更多。这也可能会影响所需的高度，但不会通过使用em 单位来解决。 Example here.

【解决方案2】：

那个 height: 20px 正在阻止您的 div 增长。尝试使用 min-height 而不是高度。

.header {
    margin: auto;
    background-color: #0479cc;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    min-height: 20px;
    overflow:hidden;
}

这将使高度至少保持 20 像素，同时允许 div 增长以适应字体大小的增加。

示例演示

添加演示以增加/减少字体大小，使用 JavaScript 更改 .header 字体大小。看起来你可以点击 Run Snippet 来查看演示。

var gFontSize = 16;
$(document).ready(function() {
  $('#grow').click(function() {
    $(".header").css("font-size", ++gFontSize);
  });

  $('#shrink').click(function() {
    $(".header").css("font-size", --gFontSize);
  });
});

.header {
  margin: auto;
  background-color: #0479cc;
  font-weight: bold;
  color: #FFFFFF;
  padding: 5px;
  min-height: 20px;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>test</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="header">TEXT</div>
  <button id="grow">increase font</button>
  <button id="shrink">decrease font</button>
</body>

</html>

【讨论】：

【解决方案3】：

当然。如果去掉高度，那么div的高度应该会随着文字的变化而变化。

这样做：

.header {
margin: auto;
background-color: #0479ccff;
font-weight: bold;
color: #FFFFFF;
padding: 5px;
}

【讨论】：

不过，这不会随文本缩放。我最终得到了一个非常薄的
并且文本正好在它的顶部流动。
@Zephyr 请展示该问题的演示。这听起来不像是默认行为。内容是浮动的还是绝对定位的？