Question

可能重复：
How to make the web page height to fit screen height

我的HTML页面不占用整个屏幕。它只需要HTML内容的大小和页脚不在页面的末尾（应该是）

我该如何解决？

我只需将页脚放在页面的末尾。

我的HTML结构如下：

<body>
    <div id="app">
        <!-- Header -->
        <div id="header"></div>
        <!-- Hero container -->
        <div class="container">
            <!-- Sub container -->
            <div class="container"></div>
        </div>
        <!-- Footer -->
        <div id='footer'></div>
    </div>
</body>

我的CSS如下：

html {
    height: 100%;
}

body {
    color: hsl(0, 0%, 33%);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    background: none repeat scroll 0 0 hsl(0, 0%, 98%);
    margin: 0;
    padding: 0;
    height: 100%;
}

* {
    outline: 0 none;
}

#app {
    min-height: 100%;
    margin:auto;
    width: 100%;
}

div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,big,cite,code,del,dfn,em,img,small,strike,strong,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tr,th,td,embed,menu,nav
    {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

.container {
    margin: 0 auto;
    position: relative;
    width: 990px;
}

#footer {
    margin: 100px 0 0;
}

任何人都可以指导我。我是CSS的新手。 :(坏了！:(

修改

可能是因为我在身体里面的一些div元素中浮动了吗？

编辑2

奇怪的是，即使页面很长而且我向下滚动，在页脚之后还有一小段白色空间永远不会出现。当我尝试用Firebug选择空白时，它会将我显示为元素。

Answer 1

一种方法是使用Jquery将app div的最小高度设置为屏幕的高度，这意味着如果内容没有填满屏幕，它仍将填充该高度。像这样的东西可能会成功：

$（document）.ready（function（）{

var screenHeight = $（document）.height（）;

$（'＃app'）。css（'min-height'，screenHeight）;

}）;

Answer 2

您可能需要稍微调整一下样式以考虑填充，但这已经在Chrome中显示出一些潜力（我现在远离Windows机器）。专门为容器分配“position：relative”和向身体分配“min-height：100％”的技巧，否则它不起作用。

<html>
    <head>
        <style type="text/css">
           body {
              min-height: 100%;
              padding: 0;
              margin: 0;
           }

           #app {
              min-height: 100%;
              position: relative;
           }

           #footer {
              position: absolute;
              bottom: 0;
              background: red;
              height: 100px;
              width: 100%;
           }

        </style>
    </head>

    <body>
        <div id="app">
            <!-- Header -->
            <div id="header"></div>
            <!-- Hero container -->
            <div class="container">
                <!-- Sub container -->
                <div class="container"></div>
            </div>
            <!-- Footer -->
            <div id='footer'>Content</div>
        </div>
    </body>
</html>

Answer 3

如果您只想将页脚放在屏幕底部，则无需担心页面高度：

#footer {
    position:absolute;
    bottom: 0;
}

如何让HTML页面占据完整的高度？

修改

编辑2

3 个答案: