Bootstrap 4 布局问题 - 包含内容的完整浏览器页面高度答案

【问题标题】：Bootstrap4 layout problem - fill browser page height with contentsBootstrap 4 布局问题 - 包含内容的完整浏览器页面高度
【发布时间】：2020-06-14 16:38:13
【问题描述】：

我们应该创建以下布局面板：

#2 面板包含更少或更多的行，因此无法静态计算其垂直大小。 #3 和#4 应该将剩余的高度填充到浏览器窗口的底部。 #3 应该可以垂直滚动，因为它可能包含大量“行”。

如何使用 Bootstrap 4 预定义的 CSS 样式构建此布局？有可能吗？

这是一种……尝试：

<div class="container-fluid">
    <div class="row">
        <div class="col-4 bg-red vh-100">
            #1 Some content on the left side<br>
            should be full height
        </div>
        <div class="col-8 bg-cyan">
            <h1>#2 Some content L1</h1>
            <h1>Some content L2</h1>
            <h1>Some content L3</h1>
            <h1>Some content L4</h1>
            <div class="container-fluid h-100">
                <div class="row h-100">
                    <div class="col-4 bg-blue overflow-auto">
                        #3 should fill remaining vertical space<br>
                        overflow-Y scroll is needed<br>
                        extra ROW 1<br>
                        extra ROW 2<br>
                        extra ROW 3<br>
                        extra ROW 4<br>
                    </div>
                    <div class="col-8">
                        <div class="bg-green">#4 content</div>
                        <div class="bg-darkgreen">#5 footer line 1 at the bottom of page</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

非常欢迎任何建议！

【问题讨论】：

#2 和 #4 的期望高度是多少.. 他们从来没有可滚动的内容？
#2 不需要滚动，包含一些详细信息，有时更多有时更少。 #4 是一个面板，其中也包含很少的信息 - 实际上不需要在那里滚动。

标签： html css bootstrap-4 flexbox

【解决方案1】：

您可以使用 flex-grow 和 max-height (mh-100)。制作滚动 div (#3) position-absolute...

<div class="container-fluid">
    <div class="row min-vh-100 mh-100">
        <div class="col-4 bg-red bg-danger"> #1 Some content on the left side<br> should be full height </div>
        <div class="col-8 bg-info d-flex flex-column mh-100">
            <h1>#2 Some content L1</h1>
            <h1>Some content L2</h1>
            <h1>Some content L3</h1>
            <h1>Some content L4</h1>
            <div class="row flex-grow-1 flex-shrink-1 overflow-hidden">
                <div class="col-4 bg-primary overflow-auto">
                    <div class="position-absolute">
                    #3 should fill remaining vertical space<br> overflow-Y scroll is needed<br>
                    extra ROW 1<br> extra ROW 2<br> extra ROW 3<br> extra ROW 4<br> extra ROW 4<br> extra ROW 4<br>
                     extra ROW 4<br> extra ROW 4<br> extra ROW 4<br> extra ROW 4<br>
                    </div> 
                </div>
                <div class="col-8 d-flex flex-column px-0">
                    <div class="bg-success flex-grow-1">#4 content</div>
                    <div class="bg-dark">#5 footer line 1 at the bottom of page</div>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/p/DUIcgBdd6Y

【讨论】：

男人！你是生命的救星！ :) 非常感谢！