HTML - 设置容器背景和高度@至少 100%答案

【问题标题】：HTML - Setting container background & height @ 100% minimumHTML - 设置容器背景和高度@至少 100%
【发布时间】：2014-04-27 20:15:35
【问题描述】：

我使用 Bootstrap 创建了一个简单的动态页面。它有一个粘性导航栏和一个粘性页脚。

我将导航栏、页脚和页面内容设置为黑色。
我希望主要内容区域为白色，页面两侧为黑色背景。

我目前只能通过设置物理高度来实现这一点，而不是使用 height:100%；

有人可以帮忙看看我现有的代码，看看我做错了什么。

我认为我也没有正确使用“div push”的想法，因为我可以看到页面上的白色推送框。

<div id="push"></div>

Picture of desired Result - 当内容大于页面时，用户会滚动但页脚总是粘滞的。我相信这已经奏效了。

JSFiddle of my code

Bootstrap Sticky Footer with Sticky Nav Code

【问题讨论】：

标签： html css twitter-bootstrap responsive-design sticky-footer

【解决方案1】：

我想建议一种更简单的方法。仔细查看 CSS，尤其是 position:fixed 属性/值。

如果您添加更多内容或缩小窗口，您会看到它根据需要滚动。这是我找到的here 的简化版本。

<html>
<head>
<title>Fixed Footer</title>
<style type="text/css">
    body{ margin:0px; padding:0px;background:black}

    #maincontent{
        width:500px;
        background:#fff;
        padding:20px 20px 0px 20px;
        margin:0px auto;
    }

    #footer{
        position:fixed;
        left:0px;
        bottom:0px;
        width:100%;
        background:#990000;
        line-height:30px;
        color:#fff;
    }
    #footer span{padding-left:20px;}
</style>
</head>

<body>
    <div id="maincontent">
    <h1>Fixierter Footer, nur mit CSS</h1>
    <p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
    <p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
    <p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
    </div>
    <div id="footer"><span>Ich bin Footer, der immer hier unten bleibt :-)</span></div>
</body>

</html>

【讨论】：

是的，谢谢，我自己做到了。我遇到的主要问题是我想将主要内容区域设置为具有 100% 页面高度的白色背景，即使页面上没有那么多内容。（见原帖截图）。

【解决方案2】：

我认为push 位于footer 之前，并且不需要在 CSS 中设置特定的高度..

http://jsfiddle.net/ugeVP/

【讨论】：

谢谢。无论内容大小如何，让中间部分（内容区域）具有白色背景、整页的任何想法。
看看这个：bootply.com/123464 -- 一旦内容超过 100% 高度，中心就会滚动。
我将其更改为 container-fluid 以获得全宽，但如果您不想要，可以将其更改回 container。