Question

举一个简单的例子......我以前从未注意过的事情。

HTML：

<body>
    <div class="container">
        <div class="sidebar">
        </div>
    </div>
</body>

CSS：

*, *:before, *:after {
    box-sizing: border-box;
}

html, body, div {
    background: rgba(0, 0, 0, .2);
    margin: 0;
    padding: 20px;
    height: 100%;
    border: 1px solid #000;
}

.container {
    height: 250px;
}
.sidebar {
    width: 20%;
}

将body的高度设置为100％seems to work fine in this fiddle。

然而，如果您更改.container的大小以使其扩展超出初始窗口大小...您会注意到div突破了body容器（它甚至似乎也突破了html容器）？

重新格式化问题

是否可以最初将body的高度设置为100％的浏览器窗口，但还允许父容器如果扩展超出初始窗口大小，则可以使用其子容器进行扩展？

Answer 1

通常情况下，如果您希望html和body获取视口的高度，但也允许它们随内容展开，则可以在{{1}上设置height: 100%仅{} html而不是min-height: 100%而不是height。在我对以下问题的回答中可以找到进一步的解释：

不幸的是，因为body是根元素，所以不能单独设置html，否则一切都会崩溃。您需要min-height，否则没有基于height: 100%及其内容的父高度; body本身的高度取决于视口的高度，您可能已经猜到了这个高度是预先确定的。

如果您的实际布局在所有这些元素上都有边框，那么这将是有问题的，因此我将假设实际上并不需要边框。您无需担心背景，因为它会自动传输到视口，允许它覆盖整个绘画区域（第二个链接中的详细信息）。

鉴于您的CSS，您只需set height: auto on body to cancel out the height: 100% in your previous rule, along with min-height: 100%：

html

请注意，我还删除了边框，再次基于我的假设，他们并不需要。

现在我们还有另一个问题：一旦内容增长超出浏览器高度the padding on html disappears，因为html, body, div { background: rgba(0, 0, 0, .2); margin: 0; padding: 20px; height: 100%; } body { height: auto; min-height: 100%; }由于html而不会与其他内容一起展开（滚动）到底部看到这个）。

您无法删除height: 100%，但您仍然可以将height: 100%上的填充更改为html左边的边距，因为边距会继续即使body溢出body，resulting in the following（再次滚动到底部）也会生效：

html

Answer 2

元素设置为100％高度时的默认行为是完全填充其父级，减去父级的填充值。

Answer 3

它是你的填充物。我把你的代码放在Dreamweaver中，并开始检查它为什么这样做。你是对的，它可以正常工作，直到它通过改变高度从视口中剔除。我通过删除填充来解决问题。我建议你重新设计你的填充方式或尝试使用填充空间而不使用填充。（例如边距：5px;例如在外层而不是在图层内部使用填充。你甚至可以使用一个空白的固定高度div，将你的内部divs加到百分之一，然后冲洗并重复。它很脏方法。）

CSS：＆＃34;身高：100％;＆＃34;工作，但打破了正常的流量

3 个答案: