更新

Question

请记住，我正在使用Bootstrap3。这是我的基本标记：

<body>
<div id="wrapper">
    <div class="row navigation"><!-- NAVIGATION GOES HERE--></div>
    <div class="container-fluid breadcrumb"><!-- BREADCRUMB GOES HERE--></div>
    <div class="container">
        <div class="row" id="content">
            <div class="col-sm-9" id="mainColumn">
                <p>Maecenas lacinia sed enim a porta. Nullam ultrices at neque congue vestibulum. In consectetur laoreet risus a laoreet. Aliquam varius urna in facilisis scelerisque. Nunc ut ante id odio mollis euismod laoreet et urna. Fusce consequat sem ex, in tristique urna sodales ac. Mauris feugiat rutrum erat, eget accumsan nibh ultricies sed. Vestibulum nibh nibh, viverra id imperdiet et, interdum sed dolor. Nullam tempor eleifend felis. Morbi vel tellus vitae odio venenatis venenatis. Suspendisse et euismod velit, sed scelerisque est. Vestibulum eget posuere ex. Morbi vulputate ipsum condimentum risus pretium, sit amet posuere nisi tincidunt. Donec cursus egestas ex eget blandit.</p>
            </div>
            <div class="col-sm-3" id="sideColumn">
                <p>Nulla est nisi, porttitor vel quam non, iaculis pulvinar nunc. Ut tempus fringilla justo, vel egestas libero vehicula vel. Mauris vitae tempor mauris. Nam aliquam elit in massa cursus, a dictum eros dictum. Aenean consectetur turpis a ante facilisis, quis porttitor est elementum.</p>
            </div>
        </div>
    </div>
</div>
<footer>FOOTER | FOOTER | FOOTER</footer>
</body>

CSS：

html, body{
    height: 100%;
}

footer{
    padding: 5px;
    background: #0000ff;
    max-width: 960px;
    margin: 0 auto;
    color: #fff;
}

p{
    padding: 0;
    margin: 0;
}

#wrapper{
    height: 100%;
    min-height: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
}

.navigation{
    height: 50px;
    background: #ff0000;
}

.breadcrumb{
    height: 25px;
    background: #00ff00;
    margin-bottom: 0;
}

.container{
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #ffff00;
}

#content{
    height: 100%;
    min-height: 100%;
    background: #00ffff;
}

似乎#content正在溢出.container之外，并且在页脚后面，我不想要。我想让它停在容器的底部，正如你认为的那样。

我尝试将溢出：隐藏在#wrapper上，但即使我有一个高度：100％，而不是高度：XXXpx，如果内容比浏览器窗口长，内容会被切断。（我在jsFiddle中有这个。）

这就是我要做的事情。让#content background在其.container的底部结束，而不是在#wrapper之外溢出。

已添加： 此外，如果内容低于浏览器窗口的100％，则该网站仍保持浏览器窗口的完整高度

http://jsfiddle.net/murphy1976/5k7xfvqn/1/