1

可能重复：
如何使网页高度适合屏幕高度

我有一个不占据整个屏幕的 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 新手。:( 卡住了！ :(

编辑

可能是因为我在 body 中的一些 div 元素中有浮动吗？

编辑 2

奇怪的是，即使页面很长并且我向下滚动，在页脚之后还有这个永远不会消失的小条空白。当我尝试使用 Firebug 选择空白时，它会将我显示为元素。

4

3 回答 3

0

您可能需要稍微调整样式以考虑填充，但这在 Chrome 中显示出一些潜力（我现在远离 Windows 机器）。专门将“位置：相对”分配给容器，并将“最小高度：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>
于 2012-11-20T16:55:02.917 回答
0

一种方法是使用 Jquery 将应用程序 div 的最小高度设置为屏幕的高度，这意味着如果内容没有填满屏幕，它仍然会填满该高度。这样的事情可能会奏效：

$(文档).ready(函数() {

var screenHeight = $(document).height();

$('#app').css('min-height' , screenHeight);

});

于 2012-11-20T16:25:34.623 回答
-3

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

#footer {
    position:absolute;
    bottom: 0;
}
于 2012-11-20T16:05:24.090 回答