Bootstrap 两列布局 100% 高度额外空间答案

【问题标题】：Bootstrap two-column layout 100% height extra spaceBootstrap 两列布局 100% 高度额外空间
【发布时间】：2014-02-02 12:53:44
【问题描述】：

我正在尝试制作具有固定侧边栏宽度的两列全高布局。为此，我使用 display: table; display: table-cell; 方法。到目前为止，这是我的代码：

HTML：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="navbar-header"> 
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

<div class="page-wrap">
    <div class="container">    
        <div class="page-sidebar">
            <ul>
                <li><a href="#">there'll be navigation</a></li>
            </ul>
        </div>
        <div class="page-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus non?</p>
        </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
}

.navbar {
    margin: 0;
}

.page-wrap {
    height: 100%;
}

.page-wrap > .container {
    display: table;
    table-layout: fixed; 
    height: 100%;
}

.page-sidebar {
    display: table-cell;
    vertical-align: top;
    width: 200px;
    height: 100%;
    background-color: #ececec;
}

.page-sidebar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.page-content {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    height: 100%;
}

jsfiddle

一切似乎都很好，但这是一回事。虽然几乎没有内容，但页面底部有额外的空间，使滚动条可见。是什么原因造成的，最好的处理方法是什么？非常感谢。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

最好让 .page-wrap 类高度自动例如：

.page-wrap{
   height:auto
}

【讨论】：

jsfiddle.net/4txrf/2 但我希望侧边栏和内容 100% 高度到页面底部。如果我像你说的那样将高度设置为自动，它对我不起作用。
div 中的内容越多，它的高度也会增加，如果你想在没有滚动条或额外空间且没有内容的情况下将其扩展到底部，则设置 body height:auto 并降低容器高度，可能是到 82%

【解决方案2】：

抱歉，我想将其发布为答案。这应该为您排序。

Body height 100% displaying vertical scrollbar

【讨论】：

【解决方案3】：

从 html 中移除 height: 100%; ，body 然后滚动条将不可见。

【讨论】：

【解决方案4】：

问题是由ul的隐含margin引起的

如果你添加

ul {    
    margin: 0 !important;
}

然后它就会消失：Running Demo

要处理这类事情，最好使用 CSS 重置，like described in this answer 将所有地方的 HTML 重置为默认行为。

【讨论】：

【解决方案5】：

好的，最终为body 设置padding-bottom: 51px（导航栏高度+ 1px 底部边框）就可以了，就像一个魅力:)

【讨论】：