Question

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

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

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

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

有没有办法处理纯CSS？

Answer 1

以em指定高度，而不是以像素为单位。然后，随着字体大小的改变，高度将自动改变。

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

Answer 2

不确定。如果你摆脱了高度，那么div的高度应该随文本而变化。

这样做：

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

Answer 3

身高：20px 阻止你的div增长。而不是高度，请尝试使用 min-height 。

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

这将使高度保持至少20px，同时允许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>

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

3 个答案: