jquery - 如何使用 Bootstrap 将列高度适合主体？

Question

我正在寻找一种解决方案，以将 Twitter Bootstrap 的列放入正文中。就像下面的例子。有没有可靠的方法来做到这一点？因为如果我尝试使用 height:100% 或绝对位置(以及 top:0、bottom:0 等)，它不会按预期工作(或者我有滚动条)。

那么我怎样才能使 col 适合 body 高度，但在移动设备上 (col-xs-...) 以回退到“正常” Bootstrap 用法？

非常感谢!

  Desktop view

  +---------------------------+---------------------+
  |         LOGO ETC          |    OTHER STUFF      |
  |         Height: ~20%      |    Height: ~20%     |
  +---------------------------+---------------------+
  |            |                                    |
  |            |                                    |
  | Navigation |         Content                    |
  |    80%     |           80%                      |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+



  Mobile View:

  +---------------------------+
  |         LOGO ETC          |
  +---------------------------+
  |         OTHER STUFF       |
  +---------------------------+
  |                           |
  |         Navigation        |
  |                           |
  +---------------------------+
  |                           |
  |         Content           |
  |                           |
  |                           |
  +---------------------------+

Answer 1

单击整页以查看您的桌面 View 。

您必须设置 body(div 的父级)的高度才能使 div 的高度(以 % 为单位)起作用，然后设置 html(body 的父级)的高度。

div {
  border: 1px solid black;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.div1,
.div2 {
  height: 40%;
}
.div3,
.div4 {
  height: 60%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="div1 col-xs-12 col-md-6">div1</div>
<div class="div2 col-xs-12 col-md-6">div2</div>
<div class="div3 col-xs-12 col-md-3">div3</div>
<div class="div4 col-xs-12 col-md-9">div4</div>