将嵌套列拉伸到全高而不滚动答案

【问题标题】：stretch nested columns to full height without scrolling将嵌套列拉伸到全高而不滚动
【发布时间】：2021-05-13 03:50:54
【问题描述】：

使用 bootstrap 4.6 我正在尝试构建一个带有左侧主菜单的界面，然后是作为子行一部分的右侧上下文菜单。我希望这两个菜单的背景都延伸到视图的底部，但是我尝试过的所有操作最终都会创建滚动条，右侧菜单比左侧长

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <body style="height: 100%;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 bg-primary">
                    <h1>Logo</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-2 bg-secondary pt-2">
                    <h5>Main Menu</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item pl-3">
                            Menu 1
                        </li>
                        <li class="nav-item pl-3">
                            Menu 2
                        </li>
                        <li class="nav-item pl-3">
                            Menu 3
                        </li>
                    </ul>
                </div>
                <div class="col p-0">
                    <div class="p-4 bg-warning">
                        <h3 class="m-0">Header</h3>
                        <div class="text-secondary">Subheader</div>
                    </div>
                    <div class="row no-gutters">
                        <div class="col ml-3 mr-2">
                            <h1>Lorem Ipsum</h1>

                            <p>Lorem ipsum </p>                
                        </div>
                        <div class="col-2 bg-danger p-2">
                            <h5>Context Menu</h5>
                            <ul class="nav flex-column">
                                <li class="nav-item pl-3">
                                    Menu 1
                                </li>
                                <li class="nav-item pl-3">
                                    Menu 2
                                </li>
                                <li class="nav-item pl-3">
                                    Menu 3
                                </li>
                            </ul>  
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </body>

这是输出。

有没有一种使用标准引导程序或 css 的方法可以让我让左右菜单在同一点结束，并且除非主要内容需要滚动条，否则没有滚动条？

【问题讨论】：

@Zim 我可以滚动整个页面，只要菜单列延伸到内容或浏览器边缘，以较长者为准。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

你会想要使用 flexbox、sizing 和 overflow 实用程序类...

d-flex flex-column 设置弹性框
flex-fill 制作一个弹性盒子子填充（拉伸）剩余高度
overflow- 根据需要滚动

<div class="container-fluid vh-100 d-flex flex-column">
    <div class="row">
        <div class="col-12 bg-primary">
            <h1>Logo</h1>
        </div>
    </div>
    <div class="row flex-fill overflow-hidden">
        <div class="col-2 bg-secondary pt-2">
            <h5>Main Menu</h5>
            <ul class="nav flex-column">
                <li class="nav-item pl-3"> Menu 1 </li>
                <li class="nav-item pl-3"> Menu 2 </li>
                <li class="nav-item pl-3"> Menu 3 </li>
            </ul>
        </div>
        <div class="col p-0 h-100 overflow-hidden d-flex flex-column">
            <div class="p-4 bg-warning">
                <h3 class="m-0">Header</h3>
                <div class="text-secondary">Subheader</div>
            </div>
            <div class="row no-gutters flex-fill overflow-auto">
                <div class="col ml-3 mr-2">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem ipsum </p>
                    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                </div>
                <div class="col-2 bg-danger p-2">
                    <h5>Context Menu</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item pl-3"> Menu 1 </li>
                        <li class="nav-item pl-3"> Menu 2 </li>
                        <li class="nav-item pl-3"> Menu 3 </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/p/jnyyitC7VU

【讨论】：