以下是该问题的基本说明:
<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%; }
这似乎是对代码的误解."100%"的高度与某些东西有关.换句话说"100%的是什么？"
这样做是设置body =窗口的大小.在JSFiddle中,它是渲染框的大小.在浏览器上,它将是观看窗口的100%.
因此,如果将浏览器窗口缩小到很小的视图空间,100%的高度将是微小尺寸的100%.这是准确的.
如果您的内容超过了该内容,那么您将遇到示例中出现的问题.回想一下,该表是子元素,而不是父容器.CSS继承自父母,而不是孩子.所以你必须确保BODY在它的高度设置中保持动态.
更新
这是一个用于身高最小高度的JSFiddle; http://jsfiddle.net/uZCKn/1/ 它需要HTML高度100%才能工作.从这里得到:最小高度不适用于身体
我唯一能想到的是用JavaScript来设置侧栏的高度或使用人造柱.但是可能还有其他事情可以让左/右栏填满它的容器高度以及我所缺少的.
有一部分解释.
要固定身体高度不会一直下降，请更改body{height:100%}为min-height:100%. 如果您关心，这在 IE6 中将不起作用。要修复您的列表，请取出浮动。添加position:relative到body，添加position:absolute到.leftbar, .rightbar并设置位置如下
.leftbar {left:0; top:0;}
.rightbar {right:0; top:0;}
你可以在我上面链接的小提琴中看到它。
使用表格。它们不纯粹，但它们有效。
基于 div 的解决方案涉及不可接受的妥协（绝对尺寸、浮动损失）。
| 归档时间： |
|
| 查看次数： |
23920 次 |
| 最近记录： |