Question

我正在尝试制作具有固定侧边栏宽度的双列全高布局。为此，我使用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

一切似乎都很好，但是一件事。虽然几乎没有内容，但页面底部还有额外的空间，这使得滚动条可见。是什么导致它，以及如何处理它的最佳方法？非常感谢。

Answer 1

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

.page-wrap{
   height:auto
}

Answer 2

很抱歉打算将此作为答案发布。这应该为你排序。

Body height 100% displaying vertical scrollbar

Answer 3

从html中移除高度：100％; ，然后将无法看到正文和滚动条。

Answer 4

问题是由margin

的隐式ul引起的

如果你添加

ul {    
    margin: 0 !important;
}

然后它会消失： Running Demo

要处理此类问题，最好使用 CSS重置，like described in this answer将HTML重置为默认行为。

Answer 5

好的，最终为padding-bottom: 51px设置body（导航栏高度+ 1px底部边框）做诀窍，就像魅力一样：）

Bootstrap双列布局100％高度额外空间

5 个答案: