如何使用bootstrap将浏览器窗口拆分为两个picies？

Question

我需要通过height:50%; width:100%:将窗口拆分为2个水平div，是否可以使用bootstrap？试过这样：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12" style="border:1px solid red">
                1
        </div>
        <div class="col-lg-12" style="border:1px solid red">
                2
        </div>
    </div>
</div>

绿色匹配它应该是什么......

Answer 1

只是一个建议使用javascript动态计算.row div的高度。 CSS height:50%仅在父div有一定高度时才有效。

EG：.row{ height:500px; }会正常工作。

但是使用jQuery函数$(window).height()来计算这个高度。

Answer 2

假设这是您唯一的标记，您可以为每个父元素提供100％的高度：

body,html {
  height: 100%;
}

.container-fluid {
    height: 100%;
  }

  .row {
  height: 100%;
    }

  .col-lg-12 {
      height: 50%;
    }

DEMO

Answer 3

不确定为什么你需要有2个盒子而没有包含设定高度的内容？

理所当然的事情就是首先填充内容，然后在你的div中添加填充，使设计符合你的需要。

为空div增加高度是在构建阶段早期发现问题。

只需向每个col-lg-12添加1 x id，如下所示：

<div class="col-lg-12" id="topContent" style="border:1px solid red">
1
</div>
<div class="col-lg-12" id="bottomContent" style="border:1px solid red">
2
</div>

现在，当您完成添加内容后，只需引用ID并在您的ID上添加填充顶部或底部，您会发现编写代码要简单得多。如果能够快速响应，那么早期试图将设置高度弄得一团糟就会找到问题。