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

Question

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

以下 CSS 片段用于设置<div>该网页中的 a 样式：

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

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

有没有办法用纯 CSS 来做？

Answer 1

那个height: 20px会阻止你的 div 增长。尝试使用min-height代替 height 。

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

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

示例演示

添加一个演示来增大/减小字体大小，使用 JavaScript 更改 .header 字体大小。看起来您可以单击“运行片段”来查看演示。

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

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