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

smdncfj3 于 2023-08-09 发布在其他

关注(0)|答案(3)|浏览(163)

我有一个Java应用程序，它在WebView中显示单个HTML文件。
下面的CSS代码片段用于设置网页中<div>的样式：

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

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

css

来源：https://stackoverflow.com/questions/50516123/set-div-height-based-on-font-size

3条答案

按热度按时间

vu8f3i0k1#

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

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

字符串

赞(0）回复(0）举报 2023-08-09

798qvoo82#

高度：20 px正在阻止您的div增长。使用min-height代替height。

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

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

示例演示 *

添加一个增加/减小字体大小的演示，使用JavaScript更改.header字体大小。看起来你可以点击RunSnippet来观看演示。

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>

的字符串

赞(0）回复(0）举报 2023-08-09

2izufjch3#

当然。如果你去掉了高度，那么div的高度应该会随着文本的变化而变化。
这样做：

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

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

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

3条答案

相关问题

热门标签

最新问答