0

代码：

<html>
    <body>
        <div id="header">
        </div>
        <div id"content">
            Some random content
        </div>
        <div id="footer>
        </div>
    </body>
</html>

CSS：

html {
    height: 100%;
}
body {
    width:960px;
    height: 100%;
    margin: 0 auto;
}
#header {
    height: 100px;
}
#content {
    min-height: 100%;
}
#footer {
    height: 100px;
    position: relative;
    bottom: 0;
}

问题：对于我一直在阅读的内容，即使内容更小，这段代码也应该让内容 div 的高度占据窗口的所有高度。问题是它需要超过窗口高度，即使内容非常小。

我不明白内容如何占用超过 100% 的高度以及如何修复它。

4

3 回答 3

3

它工作正常，您误解了它应该如何工作。您将页眉和页脚设置为 100 像素，因此该网站实际上是向整个页面添加了 200 像素。

如果那是复制和粘贴，您也有 html 错误，您的内容 div 缺少一个 = 符号，而页脚 div 缺少关闭“

你想要的是一个固定在页脚上的包装器和位置，而不是相对的。

http://jsfiddle.net/calder12/ghDUd/1/

于 2012-10-14T10:29:23.633 回答
0

它需要超过 100%，因为标题也有 100px，所以页面的总高度为 100%+100px，将标题放在内容包装内，这将是一个快速修复

于 2012-10-14T10:30:35.037 回答
0

假设正确的代码：

 <html>
    <head>
        <style type="text/css">
        html {
height: 100%;
}
body{
width:960px;
height: 100%;
margin: 0 auto;
}
#header{
height: 100px;
}
#content{
min-height: 100%;
}
#footer{
height: 100px;
position: relative;
bottom: 0;
}
</style>
</head>
        <body>
           <div id="header">
           </div>
           <div id="content">
               Some random content
           </div>
           <div id="footer">
           </div>
        </body>
    </html>

contentdiv 确实有 100% 的窗口高度。这意味着它header在窗口高度以下 100 像素（高度）处结束。如果您希望页脚始终位于底部，则应使用position: fixed; bottom: 0页脚。

于 2012-10-14T10:31:29.250 回答