在我看来，这似乎是一个非常业余的问题，但尽管如此，它仍然是一个令人沮丧的异常情况。
这实际上是两部分问题的第二部分。第一部分是一个相当常见的部分，涉及让元素拉伸到其父对象的 100% 高度。在我的演示中，我有以下 HTML：
<body>
<div id="sbcontainer">
DIV 1
<div id="sbcontent">
DIV 2
<table id="sbmaintable" cellspacing="0">
<tr>
<td>
TABLE
</td>
</tr>
</table> <!-- END MAINTABLE -->
</div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>
我希望这里的每个元素都填充其父元素内的所有垂直空间。我尝试在每个元素上使用以下样式（请注意，在我的演示中，BODY 和 HTML 也设置为 100% 高度）：
min-height: 100%;
height: auto !important;
height: 100%;
The result was as follows:
正如您所看到的，最外面的 DIV 遵循 100% 高度属性，但其余部分则不然。正如图像注释中所暗示的那样，但实际上并未在此图像中显示，我尝试将第二个 DIV（红色边框）设置为 400px 的静态高度，以查看其中的表格是否会拉伸到 100% 高度，但仍然没有。
然后我发现如果我删除height:auto;对于每个元素，它们将遵循 100% 高度属性，但会产生不需要的副作用：
正如您在图像中所看到的，每个元素现在实际上都是其父元素的 100% 高度，迫使底部延伸到其父元素的边界之外。 （即使在我的第一个示例中，带有绿色边框的最外面的 DIV 也比预期延伸得更远，因为页面上它上面还有另一个同级 DIV）。注意：仔细观察后，我可以看到蓝色的 TABLE 元素实际上与其红色 DIV 父元素的高度不同，但它仍然超出了其边界。我不确定这是否意味着什么，但我确实注意到了。
一个会think这将是一件很容易解决的事情，但尽管我付出了努力，但我没有成功。
如果我只保留height:auto;并删除100%属性，这根本不会拉伸它们。
我通过 Google 和 StackOverflow 搜索了这方面的解决方案，尽管许多网站都涵盖了 100% 的高度问题，但我仍然没有找到实际的解决方案。
我目前正在 Firefox 中对此进行测试。
您可以使用绝对定位。
#b {
width: 40em;
height: 20em;
position:relative;
background: red;
}
#c {
position: absolute;
top: 1em;
bottom: 1em;
left: 1em;
right: 1em;
background: blue;
}
<div id="b">
<div id="c">
</div>
</div>