Question

我有以下代码：

<div id="container">
   <div id="top">TOP TEXT
   </div>
   <div id="middle">MIDDLE TEXT
   </div>
   <div id="bottom">BOTTOM TEXT
   </div>
</div>

使用以下css：

#top { font-size: 13px;}
#middle { font-size: 40px;}
#bottom { font-size: 10px;}

如您所见，字体大小非常不同。问题是div没有正确显示，因为字体大小太大，使文本显示在其他文本上。 div不调整高度....我尝试使用高度：auto，我尝试更改div的跨度，溢出：可见......但我找不到解决方案。如何强制div将其高度调整为大字体？

解决方案：谢谢大家的意见。事实上，Shredder给了我jsfiddle的链接....告诉我问题不在那里。我在BODY标签上发现了一些问题：

body {font: 75%/125% arial,sans-serif;}

你可以看到，这个“75％/ 125％”改变了font-height ....所以有问题...... 非常感谢你！

Answer 1

文本不应重叠如果您只显示了css和html，则会扩展div以适合其内容。由于提供的信息有限，它可能是以下之一（以及其他）： - div的高度或最大高度设置在你的css的某个地方， - div使用position：absolute放在你的css中的某个位置

Answer 2

使用＆＃39; em＆＃39;和＆＃39; pc＆＃39;定义您的尺寸而不是像素。

这有一些副作用，但总的来说它会让你使用相对大小（即1.2em [字体高度的120％]）作为div高度，它会随着字体大小的增加而增加增加。

您也可以使用它来设置输入大小等。（pc或picas是字体的宽度）。

Answer 3

这不是你的问题，但对于到达此处的其他人来说：如果父母（如正文）的行高设置为较小的（呃）值，则Div不会扩展其文本内容。

Answer 4

正如您所说，此问题不是由您的代码引起的。没错，这部分代码是造成您问题的原因。

body {font: 75%/125% arial,sans-serif;}

但是 font属性及其属性75％/ 125％确实会更改指定div及其子级的行高，而不是font-height。您的行高应设置为100％或更大，否则具有较大字体大小的文本可能会与设置的行高重叠。