以下是问题的基本说明：
<html><head><style type="text/css">
html {width: 100%; height: 100%; background: red;}
body {width: 100%; height: 100%; background: green;}
.leftbar, .rightbar {height: 100%; background: blue;}
.leftbar {float: left;}
.rightbar {float: right;}
table {width: 100px; height: 800px; background: black; color: white;
margin: 0 auto 0 auto;}
</style></head>
<body>
<ul class="leftbar"><li>one</li><li>two</li></ul>
<ul class="rightbar"><li>alpha</li><li>beta</li></ul>
<table><tbody><tr><td>blah blah</td></tr></tbody></table>
</body>
</html>
我们可以立即看到，浮动的ul元素和包含它们的body一样高，问题是body没有它包含的table那么高。
如何使body足够大？在本例中，我希望leftbar和rightbar在滚动允许的范围内一直向下，这样您就永远看不到它们下面的任何间隙。
从body规则中删除height: 100%-这会使主体与视口高度（小于内容高度）一样高。
body{ height:100%; }
这似乎是对代码的误解。"100%"的高度是相对于某个事物而言的。换句话说，"100%的什么？"
这样做的作用是设置body=窗口的大小。在JSFiddle中，它是渲染框的大小。在浏览器上，它将是查看窗口的100%。
因此，如果将浏览器窗口缩小到一个很小的视图空间，那么100%的高度将是小尺寸的100%。这是准确的。
如果你的内容比这更长，那么你就会遇到你在例子中看到的问题。回想一下，表是一个子元素，而不是父容器。CSS继承自父代，而不是子代。因此，您必须确保BODY在其高度设置中保持动态。
更新
这是一个JSFiddle在身体上的最小高度；http://jsfiddle.net/uZCKn/1/它需要HTML高度为100%才能工作。从这里得到：最小高度不适用于身体
我唯一能想到的就是一个JavaScript来设置侧栏的高度或使用伪列。但可能还有其他东西会让左/右栏填满我错过的容器高度。
这是部分原因。
http://jsfiddle.net/6ZeLh/
为了固定车身高度不会一直下降，请将body{height:100%}更改为min-height:100%。如果你在乎的话，这在IE6中是行不通的。要修复列表，请去掉浮点数。body加position:relative，position:absolute加.leftbar, .rightbar，位置设置如下
.leftbar {left:0; top:0;}
.rightbar {right:0; top:0;}
你可以在我上面链接的小提琴中看到它。
删除
html, body { height: 100%; }
并添加
body { height: fit-content; }
另一件事是证明没有子div使事情变得比实际情况更小。
使用表格。它们是不纯的，但它们有效。
基于div的解决方案涉及不可接受的折衷（绝对尺寸、浮动损失）。
如果使用浮点，则必须使用clearfix。示例（溢出：隐藏到父div给您一个最简单的清除修复）：
<div style="overflow: hidden;">
<ul class="leftbar">
<li>one</li>
<li>two</li>
</ul>
<ul class="rightbar">
<li>alpha</li>
<li>beta</li>
</ul>
</div>
您可以在谷歌上搜索更多的clearfixes，尤其是针对您的案例