Question

以下是问题的基本illustration：

<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一直向下，只要滚动允许，所以你永远不会看到它们下面的任何空隙。

Answer 1

从height: 100%规则中移除body - 这会使身体与视口高度一样高（小于内容高度）。

Answer 2

body{ height:100%; }

这似乎是对代码的误解。 “100％”的高度与某些东西有关。换句话说，“100％的是什么？”

这样做是设置body =窗口的大小。在JSFiddle中，它是渲染框的大小。在浏览器上，它将是观看窗口的100％。

因此，如果将浏览器窗口缩小到很小的视图空间，100％的高度将是微小尺寸的100％。这是准确的。

如果您的内容长于此内容，那么您会遇到示例中出现的问题。回想一下，该表是子元素，而不是父容器。 CSS继承自父母，而不是孩子。所以你必须确保BODY在它的高度设置中保持动态。

更新

这是一个用于身高最小高度的JSFiddle; http://jsfiddle.net/uZCKn/1/ HTML高度需要100％才能正常工作。从这里得到：min-height does not work with body

我唯一能想到的是设置侧栏高度或使用人造柱的JavaScript。但是可能还有其他事情可以让左/右栏填满它的容器高度以及我所缺少的。

有一部分解释。

Answer 3

http://jsfiddle.net/6ZeLh/

要确保身体高度不会一直向下，请将body{height:100%}更改为min-height:100%。如果你在意，这在IE6中不起作用。要修复你的清单，请把浮子拿出来。将position:relative添加到body，将position:absolute添加到.leftbar, .rightbar并按如下方式设置排名

.leftbar  {left:0; top:0;}
.rightbar {right:0; top:0;}

你可以在我上面链接的小提琴中看到它。

Answer 4

删除

html, body { height: 100%; }

并添加

body { height: fit-content; }

另一件事是要证明没有儿童div正在使事情变得更小然后它应该是。

Answer 5

如果使用浮动，则必须使用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>

你可以谷歌更清晰，特别是你的情况

Answer 6

使用表格。他们不纯洁，但他们工作。

基于div的解决方案涉及不可接受的妥协（绝对尺寸，浮动损失）。

html体小于其内容

6 个答案: