Html Bootstrap 3柱，高度为100%_Html_Css_Twitter Bootstrap

Html Bootstrap 3柱，高度为100%

html css twitter-bootstrap

Html Bootstrap 3柱，高度为100%,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一个带有以下html标记的页面： <html> <head>...</head> <body> <div class="container"> <header>...</header> <div class="wrapper"> <div class="row">

我有一个带有以下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%。在使用chrome开发者工具查看我的页面时，我意识到

.row

和

.col-aside

并没有达到100%的高度。我有点迷茫，因为我看到了关于

display:table

的答案，但我很确定这不是必要的，因为我在没有引导的情况下仅使用div和它们的高度就完成了布局

因此必须拉伸列，使其具有

最小高度：100%

最好不使用显示：表格和位置：绝对

更新了：jsfiddle。类似的，在这里你可以看到。行并没有得到100%的高度，尽管事实是。wrapper得到100%

当处理

高度：100%

时，所有的父级都应该是

高度：100%

。如果一个不是，那么就没有孩子是

100%的方法是复杂的，特别是当涉及到许多有填充或边距的孩子时。它无法显示您期望的内容（即超出屏幕大小）

您可以尝试使用底部为0的

position:fixed

，但必须处理非固定div的位置。

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

.col-aside {
     height: 100vh;
}

您可以轻松地指定一个div的高度，而不必指定更高级别的HTML块的高度

Viewport在所有现代浏览器中都受支持，最早可追溯到IE9。IE8不支持viewport，但如果您需要回溯到那个程度的传统支持，您可以将回退设置为高度：100%（确保覆盖所有包含的块）

下面是一个jsbin来演示：

不管是横排还是横列都不能达到100%的高度。

您这里有3张底片，请用适当的英语澄清。可能会对您有所帮助。看看是否添加'！重要提示“修复您的问题…”。。。它应该覆盖任何其他样式表设置。。例如：最小高度：100%！重要的；乔丹，对不起，我已经编辑了我的帖子。横排和纵列不能得到100%的高度。他们两个，卡斯帕格，我试过了。我想我将用一个JSFIDLE示例来展示我的案例

.col-aside {
     height: 100vh;
}