html正文小于其内容
以下是该问题的基本说明：
<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% - 这会使身体与视口高度相比较高（小于内容高度）。
http://jsfiddle.net/6ZeLh/
将身体高度修改为min-height:100%以便将body{height:100%}修改为min-height:100% body{height:100%} 。 如果你在意，这在IE6中将不起作用。 为了修正你的名单，把浮标移出。 添加position:relative对于body ，将position:absolute添加到.leftbar, .rightbar并设置位置，如下所示
.leftbar {left:0; top:0;}
.rightbar {right:0; top:0;}
你可以在上面链接的小提琴中看到它。
body{ height:100%; }
这似乎是对代码的误解。 “100％”高度是相对于某些事物而言的。 换句话说，“100％是什么？”
它所做的是设置body =窗口的大小。 在JSFiddle中，它是呈现框的大小。 在浏览器上，它将是查看窗口的100％。
所以，如果将浏览器窗口缩小到一个很小的视图空间，100％的高度将是小尺寸的100％。 这是准确的。
如果您的内容比这更长，那么您遇到了您在示例中看到的问题。 回想一下，表是一个子元素，而不是父容器。 CSS从父母继承，而不是孩子。 所以你必须确保BODY在高度设置中保持动态。
更新
这里有一个用于身体最小高度的JSFiddle; http://jsfiddle.net/uZCKn/1/它需要HTML高度是100％才能工作。 从这里得到：最小高度不适用于身体
我能想到的唯一的事情就是设置边栏高度或使用虚拟列的JavaScript。 但是可能还有其他的东西会让左/右栏填充它的容器高度以及我错过了。
有一部分解释。
链接地址: http://www.djcxy.com/p/88279.html