Question

这必须是以前回答的问题，但我无法找到涵盖它的答案。

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

有问题的陌生：

身体元素，身高：100％，停在浏览器的底部窗口。向下滚动显示出来白色＆lt; html＆gt;在灰色之下＆LT;身体GT;
蓝色＆lt; contentBorder＆gt;也停在浏览器窗口的底部。

这两个，尽管被包含在内，一直在DOM中，高度为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>

Answer 1

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

Answer 2

Kyle S正在做些事情 - 尝试只将身体设置为100％高度，而不是html元素。

请参阅http://jsfiddle.net/A49vb/

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

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

2 个答案: