Question

代码：

<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％的高度以及如何修复它。

Answer 1

它工作正常，你误解它应该如何工作。页眉和页脚设置为100px，因此该网站实际上将200px添加到整个页面。

如果这是复制并粘贴你也有html错误，你的内容div缺少一个=符号而且页脚div缺少结束“

你想要的是一个封面和固定在页脚上的位置而不是相对的。

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

Answer 2

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

Answer 3

假设代码正确：

 <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>

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

Css高度/最小高度100％窗口

3 个答案: