如何基于字体大小设置<div>高度？（纯CSS实现）

当然可以解决这个问题！你现在遇到的核心问题是给.header设置了固定的height: 20px，这就把容器的高度锁死了，当用户调大字体时，文本自然会超出边框。下面是几个纯CSS的解决办法，你可以根据需求选择：

方法1：移除固定高度，让内容自动撑开容器 #

这是最简单直接的方案——删掉height: 20px，让容器的高度由内部文本的大小加上上下内边距（padding）自动决定。如果想要保留一个最小高度防止字体太小时容器太矮，可以用min-height代替height：

.header {
  margin: auto;
  background-color: #0479ccff;
  font-weight: bold;
  color: #FFFFFF;
  padding: 5px;
  /* 可选：设置最小高度，保证字体较小时容器不会太窄 */
  min-height: 20px;
  /* 让文本垂直居中的小技巧，适配不同字体大小 */
  line-height: normal;
}

方法2：用Flex布局实现更灵活的垂直居中+自适应高度 #

如果希望文本始终垂直居中，同时容器高度自动适配字体，Flex布局是更可靠的选择：

.header {
  margin: auto;
  background-color: #0479ccff;
  font-weight: bold;
  color: #FFFFFF;
  padding: 5px;
  /* 移除固定height */
  display: flex;
  align-items: center; /* 让文本垂直居中 */
  /* 可选：设置最小高度 */
  min-height: 20px;
}

为什么这能生效？ #

当你去掉固定的height属性后，元素的高度会遵循**“内容高度 + 内边距”**的计算规则。不管用户把字体调大多少，容器都会自动扩展高度来容纳文本，不会再出现溢出的情况。

内容的提问来源于stack exchange，提问作者Zephyr