Bootstrap 网格列高 100%

Posted 2023-03-06

【中文标题】Bootstrap 网格列高 100%

【英文标题】：Bootstrap Grid Column Height 100%

【发布时间】：2015-06-28 19:18:00

【问题描述】：

我正在使用引导网格系统来制作一些嵌套网格。唯一的问题是我无法让网格跨越整个屏幕，目前它只有 1 行高。

有没有办法让它填满 100% 的父容器？我尝试过简单的东西，比如 CSS 高度属性。

这是我下面的代码

    <div class="container">
<div class="row" style="height:100vh">
    <div class="col-md-6" style="height:100%">
        <div class="row" style="height:50%">
            <div class="col-md-6">2</div>
            <div class="col-md-6">3</div>
        </div>
        <div class="row" style="height:50%">
            <div class="col-md-6">4</div>
            <div class="col-md-6">5</div>
        </div>
    </div>
    <div class="col-md-6" style="height:100%">
        1
    </div>
</div>

【问题讨论】：

找到了解决方案。在主行上使用 height:100vh ，它将 div 扩展到整个页面，然后在行内使用正常百分比相对缩放其他 div。

【参考方案1】：

要让 div 完全展开，div .col-md-6 height:100%; position:relative; 应该可以工作。我们可以看看你的 CSS 吗？

【讨论】：

显示相对？

【参考方案2】：

您可以将height:100% 添加到每个.col-md-6。

请看这里：http://codepen.io/Nazzanuk/pen/yNLNBd

【讨论】：

这会在调整窗口大小时破坏响应式网格

【参考方案3】：

使用 CSS 视口单位：

http://caniuse.com/#feat=viewport-units

这太神奇了！