如果您将下面的文件保存为 html 格式，您会看到一个垂直滚动条。由于高度为
<div class="tabData" id="tab3data" style="visibility: visible;">
没有设置，不是应该自动展开以适应所有内容吗？
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tabData
{
width: 100%;
background-color: Yellow;
overflow: auto;
}
</style>
</head>
<body>
<div class="tabData">
<div style="height: 390px; background-color: Green;">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
</div>
Hello
</div>
</body>
最佳答案
你有一个父容器 div.tabData其高度由子元素的总高度决定，其中有两个，内部<div>以及包含单词“Hello”的匿名 block 。
内部div高度为 390px，“Hello”行约占 1.5em。因此，黄色背景的父元素刚好可以容纳 390px 的内部 div 和一行文本。
如果您向内部 div 添加了足够的内容，文本最终会流到具有绿色背景的内部 div 之外。这就是浏览器默认情况下的工作方式，无论如何它们都会尝试使文本可见。
但是，就父元素而言，它具有基于 390px + height-of-1-line-of-text 的正确高度。当文本溢出固定高度的子元素时，浏览器不会重新计算 block 元素的高度。
如果您继续向内部 div 添加更多文本，它将开始溢出父元素中的任何文本，最终，它将溢出父容器并导致出现垂直滚动条，因为您设置了 overflow: auto。在父元素上。
另一方面，如果你没有固定内部 div 的高度，你会得到预期的行为，内部 div 展开以包含其所有内容，父 div 展开以包含内部 div 和一行文字。
示例
如果您尝试以下 fiddle ，http://jsfiddle.net/audetwebdesign/s3bnJ/ ，并调整水平宽度，可以看到内层div的文字从内层div流出，进入父div，最终，你会看到滚动条出现。
关于html - 即使未设置高度也会出现垂直滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15933780/