bootstrap 3怎么让两栏Div实现height 100%?

标签: bootstrap
发布时间: 2017/11/17 17:09:32
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试着用bootstrap3来制作两栏的全高度布局。看起来bootstrap 3不支持100%的height布局。我想做的是:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

Html:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>


解决方法 1:

Html:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

CSS:

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

上面的代码将实现height:100%的div(由于我们添加的自定义css-table属性),以及中屏幕宽度和上面的比例1:3(导航:内容),(由于bootstrap的默认类:col-md-3和col-md-9)

NB:

1) 为了不打乱bootstrap的原生col类,我们在标记中添加了其他类,比如no-float,并且只设置了display:table-cellfloat:none.

2) 如果我们只想使用css-table代码来实现特定的断点(比如中等屏幕宽度和以上),但对于移动屏幕,我们想要默认回到通常的bootstrap行为,而不是在媒体查询中封装自定义的CSS,比如:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}


官方微信
官方QQ群
31647020