Question

我有一个包含以下html标记的页面：

<html>
    <head>...</head>
    <body>
        <div class="container">
            <header>...</header>

            <div class="wrapper">
                 <div class="row">
                     <div class="col-md-8">...</div>
                     <div class="col-md-3 col-md-offset-1 col-aside">
                         <aside>...</aside>
                     </div>
                 </div>
             </div>
        </div>
    </body>
 </html>

我为：

设置了100％的高度

html, body, body > .container {
    height: 100%;
}

.wrapper {
    min-height: 100%;
}

.wrapper > .row {
    min-height: 100%;
}

.col-aside {
    min-height: 100%;
}

所以我希望我的两列都有100％的最小高度。在使用chrome开发人员工具检查我的页面时，我意识到.row和.col-aside没有达到100％的高度。我有点失落，因为我看到了处理display: table的答案，但我很确定它没有必要，因为我设法做了这个布局而没有使用div和它们的高度的bootstrap。

所以必须拉伸列以使它们min-height: 100%最好不使用display：table和position：absolute？

已更新：jsfiddle http://jsfiddle.net/U6H6W/。像这样的东西，在这里你可以看到。尽管.wrapper得到100％，但它并没有达到100％的高度

Answer 1

更好的解决方案是使用视口高度，例如：

.col-aside {
     height: 100vh;
}

您可以轻松指定一个div的高度，而无需指定更高级别HTML块的高度。

Viewport在所有现代浏览器中都受支持，并且可以追溯到IE9。 IE8不支持视口，但如果您需要返回到目前为止的旧版支持，则可以设置回退到高度：100％（确保覆盖所有包含的块。）

这是一个jsbin来演示：

http://jsbin.com/zeyuraka/1/edit

Answer 2

在处理heigth:100%时，所有父母都应该在height:100%。如果一个人没有，那么就没有孩子。

100％的方法很复杂，特别是对于许多有填充或边距的孩子。它无法显示您的期望（即超出屏幕尺寸）。

您可以使用position: fixed尝试bottom:0，但您必须处理非固定div的位置。

Bootstrap 3柱，高度为100％

2 个答案: