Bootstrap 4 中 flex-grow div 內的垂直溢出

Question

我在 html 網頁布局方面有點菜鳥（我否認這個原因，我覺得我可能犯了一些菜鳥錯誤）但這讓我發瘋，我無法找到適用於我的特定情況的解決方案

我正在嘗試為未來的桌面應用程序制作此布局

這是我的代碼

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <style> html, body { height: 100%; } .vh-100 { min-height: 100vh; } .height-100 { height: 100%; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="d-flex flex-column h-100"> <div class="content"> first menu </div> <div class="content"> second menu </div> <div class="content bg-danger flex-grow-1"> <div class="d-flex flex-row w-100 h-100"> <div class="d-flex flex-column h-100 w-25"> <div class="content bg-success"> first submenu </div> <div class="content overflow-auto"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien leo, ornare ac dictum vel, feugiat in felis. Proin et nibh us orci luctus et ultrices posuere cubilia Curae; Integer dolor tellus, sagittis sed felis sed, blandit pharetra nisi. Suspendisse suscipit consectetur nisi, vel interdum enim lacinia vel. Nulla placerat malesuada libero, vitae egestas metus interdum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer consectetur porta augue ac suscipit. </div> </div> <div class="content bg-light w-75"> more content </div> </div> </div> <div class="content bg-secondary"> Footer </div> </div>

為什么代碼忽略了內容中的溢出自動？ 我該如何解決？ 非常感謝

Answer 1

您需要設置 max-height 和 overflow:hidden 在身體上：

body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

然后overflow:auto在內容上讓它根據需要滾動......

<div class="d-flex flex-column h-100">
    <div class="content"> first menu </div>
    <div class="content"> second menu </div>
    <div class="content bg-danger flex-grow-1 overflow-auto">
        <div class="d-flex flex-row w-100 h-100">
            <div class="d-flex flex-column h-100 w-25">
                <div class="content bg-success"> first submenu </div>
                <div class="content overflow-auto"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien leo, ornare ac dictum vel, feugiat in felis. Proin et nibh us orci luctus et ultrices posuere cubilia Curae; Integer dolor tellus, sagittis sed felis sed, blandit pharetra nisi. Suspendisse suscipit consectetur nisi, vel interdum enim lacinia vel. Nulla placerat malesuada libero, vitae egestas metus interdum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer consectetur porta augue ac suscipit. </div>
            </div>
            <div class="content bg-light w-75"> more content </div>
        </div>
    </div>
    <div class="content bg-secondary"> Footer </div>
</div>

Codeply 演示