如何让 HTML 页面占据完整高度？ [复制]答案

【问题标题】：How to make HTML page take up complete height? [duplicate]如何让 HTML 页面占据完整高度？ [复制]
【发布时间】：2012-11-21 01:01:11
【问题描述】：

可能重复：
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 新手。 :( 卡住了！ :(

编辑

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

编辑 2

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

【问题讨论】：

您正在寻找的是一个粘性页脚：ryanfait.com/sticky-footer
如果您的内容超出窗口的高度，您的预期行为是什么？页脚会出现在视口底部还是页面底部？我问是因为您可以使用 position:fixed 或其他技术。
相关：stackoverflow.com/questions/8257311/…
在stackoverflow.com/questions/13180981/… 上查看我的回答以获得粘性页脚
@MikeRobinson，如果内容超过窗口的高度，页脚应该出现在页面底部而不是视口。

标签： html css footer

【解决方案1】：

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

$(document).ready(function() {

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

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

});

【讨论】：

这不起作用。我刚才试过了！ :(

【解决方案2】：

您可能需要稍微调整样式以考虑填充，但这在 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>

【讨论】：

我试过了，但它似乎不起作用？难道是因为我在body里面的一些div元素中浮动了
唯一的变化是，现在页脚就像磁铁一样粘在倒数第二个 div 上！ :(
您可能还有其他一些冲突——我发布的代码在 Chrome 中运行良好，所以除此之外，我只是猜测您的代码有什么问题。也许从这个开始，然后添加额外的部分直到它破裂？
不，即使我把所有东西都剥掉了。现在页脚与页眉合并，仅此而已。 :(
你能在网上发布你的代码吗？

【解决方案3】：

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

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

【讨论】：

这会导致用户滚动时出现问题。
如果有东西可以滚动，是的。您也可以使用“固定”而不是“绝对”（正如迈克在 cmets 中提到的那样）。但是，页脚将始终可见。这完全取决于您想要实现的目标。
我不希望页脚一直可见。