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

时间:2018-05-24 18:42:03

标签: java html css

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

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

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

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

有没有办法处理纯CSS?

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

这样做:

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

答案 2 :(得分:0)

身高: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>