Bootstrap - 如何创建带有可滚动列的全屏布局？答案

【问题标题】：Bootstrap - How to create a full screen layout with scrollable columns?Bootstrap - 如何创建带有可滚动列的全屏布局？
【发布时间】：2019-05-22 15:25:25
【问题描述】：

我正在尝试创建一个占据 100% 视口的全屏布局，带有粘性页眉和页脚，并在主要内容区域中单独滚动列。

我已经尝试过在不同的行和列上使用 .h-100 和 .flex-grow-1，但我不能完全让它发挥作用。我最接近的是将 h-100 添加到容器和中间行，但这会将页脚推离屏幕底部。

<body>
<div class="container-fluid h-100">
    <div class="row">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">Article list </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row">
        <div class="col-12 border">Footer </div>
    </div>
</div>
</body>

我可以让它只使用一列，但添加多于一列会以我不理解的方式破坏布局。

【问题讨论】：

该文档显示了如何执行a sticky header 和a sticky footer。可滚动列应该只是一个溢出设置。

标签： css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

制作容器d-flex，然后使用flex-grow-1使内容区域填满高度。您还需要在导航栏和页脚上使用flex-shrink-0，这样它们就不会“挤压”高度。

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">
            Article list
        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

演示：https://www.codeply.com/go/ouc3hddx5i

【讨论】：

在进一步测试中，这在 chrome 和 safari 中有效，但在 Firefox 中溢出-y：滚动属性被忽略。我认为这与这个问题有关：stackoverflow.com/questions/28636832/…。我尝试将“最小高度：0”添加到第二行，但这没有效果。有什么想法吗？
我更新了Codeply。对于 FF，您需要在行上使用 min-height:0，在可滚动列上使用 max-height:100%。