元素高度锁定到浏览器高度答案

【问题标题】：element heights locked to browser height元素高度锁定到浏览器高度
【发布时间】：2011-07-08 07:54:39
【问题描述】：

这一定是以前回答过的问题，但我找不到涵盖它的答案。

下面的 html/css 做了一些我觉得奇怪的事情，它在 FF4/5、Chrome 12 和 Safari 5 中都做了，所以至少这种奇怪在浏览器中是一致的。

有问题的奇怪之处：

body 元素，高度：100%，停在浏览器底部窗户。向下滚动显示灰色下的白色。
蓝色的也停在浏览器窗口的底部。

尽管被包含在 DOM 中，但它们都包含在 height:100% 的元素中。如果这个问题已经得到回答，我们深表歉意，并感谢您引导我对这里发生的事情进行描述性解释。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>simple height test</title>
    <style type="text/css">
        html, body {
            border: 0px;
            margin: 0px;
            height: 100%;
        }
        html {
            background-color: #FFFFFF;
        }
        body {
            background-color: #999999;
        }
        #contentBorder {
            width: 20px;
            height: 100%;
            background-color: #666699;
            float: left;
        }
        #contentContainer {
            width: 200px;
            height: 1000px;
            background-color: #333333;
        }
    </style>
</head>

<body>
    <div id="contentBorder"></div>
    <div id="contentContainer"></div>
</body>
</html>

【问题讨论】：

标签： html css browser height containers

【解决方案1】：

将body 和html 的高度指定为100% 会将它们设置为浏览器窗口高度的100%。如果您希望背景填充页面的总垂直高度，那么如果您从第一个 CSS 块中删除 height: 100%，它应该可以工作。

【讨论】：

谢谢。这回答了我的问题，尽管我发现我并没有真正正确地提出我的问题。本质上，我想要一个元素来响应兄弟元素的高度，但是现在对 CSS 有了更好的理解，我相信这是不可能的。相对高度仅相对于父元素，父元素不会根据其子元素调整大小。对？（我想我会自己提出这个问题，如果我在这里找不到已经问过的问题......）
@ericsoco 父元素通常确实会拉伸到其内容的大小，包括任何子元素除非它们是位置：固定/绝对；或漂浮。如果您在我的回答中查看 jsfiddle，我制作了一个不需要浮点数的版本。如果您确实需要将元素拉伸到其浮动子元素，请查看colinaarts.com/articles/float-containment

【解决方案2】：

Kyle S 正在做某事 - 尝试仅将 body 设置为 100% 高度，而不是 html 元素。

见http://jsfiddle.net/A49vb/

我冒昧地将你的#contentContainer 放在#contentBorder 中，这样任何（未来的）内容都会拉伸两个 div。

【讨论】：