Bootstrap 4:可滚动的行，填充剩余的高度

本文介绍了Bootstrap 4:可滚动的行，填充剩余的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于Bootstrap 4，我希望有一行可以填满页面的剩余高度，但其中的内容不应使高度超出给定的位置.内容应该可以通过按钮滚动，滚动条最多应该是不可见的.

With Bootstrap 4 I would like to have a row, which fills up the remaining height of the page, but the content of it should not extend the height over the place given. The content should be scrollable by buttons, the scrollbar at best should not be visible.

我试图将我的布局分解为这个.请随时纠正-这确实不是我的强项.

I tried to break down my layout to this. Please feel free to correct - this is really not my strong suit.

JSFiddle

HTML:

<!doctype html>
<html lang="de">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

       <link rel="stylesheet" type="text/css" href="/library/bootstrap-4.1.0/css/bootstrap.min.css">
       <link rel="stylesheet" type="text/css" href="/library/fontawesome-5.0.10/css/fontawesome-all.min.css">
       <link rel="stylesheet" type="text/css" href="/css/screen/presentation.css"/>

       <title>Test</title>
   </head>
   <body>
       <div id="wrapper">
           <div id="sidebar-wrapper">
               <ul class="sidebar-nav">
                   <li>Test 1</li>
                   <li>Test 2</li>
                   <li>Test 3</li>
               </ul>
           </div>
           <div id="page-content-wrapper">
               <div class="container-fluid d-flex h-100 flex-column">
                   <div class="row">
                       <div class="col">
                           <a href="#menu-toggle" class="btn btn-light" id="menu-toggle"><i class="fas fa-bars fa-3x"></i></a>
                       </div>
                   </div>
                   <div class="container h-100 flex-column d-flex">
                       <div class="row">
                           <div class="col headline-col bg-warning">
                               <h5 class="align-middle">Headline 1</h5>
                           </div>
                       </div>
                       <div class="section-div h-100 flex-column d-flex">
                           <div class="row bg-success">
                               <div class="col">
                                   <h5>Subtitle 1</h5>
                               </div>
                           </div>
                           <div class="row flex-fill bg-danger d-flex">
                               <div class="col">
                                   <h5>Subtitle 2</h5>
                                   <p>
                    This should fill the remaining height, but the content should not use more space than available.
                    So it should be scrollable, best without scrollbar and scrolling by buttons
                  </p>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="container">
                       <div class="row">
                           <div class="col last-col bg-success text-right">
                               This should always be at the bottom of the page.
                             <button class="btn btn-primary btn-scroll-up" type="button">Sroll Up</button>
                               <button class="btn btn-primary btn-scroll-down" type="button">Scroll Down</button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       <script src="/library/jquery-3.3.1/jquery-3.3.1.min.js"></script>
       <script src="/library/bootstrap-4.1.0/js/bootstrap.bundle.min.js"></script>
       <script src="/javascript/presentation.js"></script>
   </body>
</html>

CSS:

html {
    height: 100%;
}

body {
    overflow-x: hidden;
    height: 100%;
}

.flex-fill {
    flex: 1;
}

.startpage-col, .headline-col {
    border-top-left-radius: 15px 15px;
    border-top-right-radius: 15px 15px;
}

.headline-col {
    height: 40px;
    line-height: 40px;
}

.headline-col h5 {
    vertical-align: middle;
    display: inline-block;
}

.last-col {
    border-bottom-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    height: 50px;
}

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    height:100%;
}

#wrapper.toggled {
    padding-left: 350px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 350px;
    width: 0;
    height: 100%;
    margin-left: -350px;
    overflow-y: auto;
    background: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 350px;
}

#page-content-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 15px;
    background: #000;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -350px;
}


/* Sidebar Styles */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 350px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li i {
    text-indent: 0px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #666;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #000;
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
    text-decoration: none;
    color: #000;
}

.sidebar-nav>.sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
    color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
    padding-left: 0;
    }
    #wrapper.toggled {
    padding-left: 350px;
    }
    #sidebar-wrapper {
    width: 0;
    }
    #wrapper.toggled #sidebar-wrapper {
    width: 350px;
    }
    #page-content-wrapper {
    padding: 20px;
    position: relative;
    }
    #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
    }
}

JS:

$('#menu-toggle').click(function(e) {
    e.preventDefault();
    $('#wrapper').toggleClass('toggled');
});

非常感谢！

推荐答案

我遇到了类似的问题:

I had a similar issue: Flexbox height issue with nested flex-grow boxes in Bootstrap 4

而不是使用h-100.这将迫使容器为视口高度的100％，而不是剩余高度，请使用Bootstrap 4.1 flex grow utils ...

Instead of using h-100. which will force the containers to be 100% of viewport height rather than remaining height, use the Bootstrap 4.1 flex grow utils...

flex-grow-1填充弹性容器的剩余高度
flex-shrink-0使其他行缩小而不会挤压

flex-grow-1 to fill remaining height of flex container
flex-shrink-0 to make other rows shrink without squishing

然后在相应的div上设置overflow:auto以便其滚动.

Then set overflow:auto on the appropriate div so that it scrolls.

演示: https://codeply.com/go/lk58xAjDc7

模板(仅使用Bootstrap类):

Template (using only Bootstrap classes):

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            ...
        </ul>
    </div>
    <div id="page-content-wrapper" class="min-vh-100 p-0 d-flex flex-column overflow-hidden">
        <div class="container-fluid d-flex flex-column overflow-auto flex-fill">
            <div class="row flex-shrink-1">
                <div class="col">
                    <a href="#menu-toggle" class="btn btn-light" id="menu-toggle"><i class="fas fa-bars fa-2x"></i></a>
                </div>
            </div>
            <div class="container flex-fill flex-column d-flex">
                <div class="row flex-shrink-0">
                    <div class="col headline-col bg-warning">
                        <h5 class="align-middle">Headline 1</h5>
                    </div>
                </div>
                <div class="section-div flex-grow-1 flex-column d-flex">
                    <div class="row flex-shrink-0 bg-success">
                        <div class="col py-1">
                            <h5>Subtitle 1</h5>
                        </div>
                    </div>
                    <div class="row flex-fill bg-danger d-flex">
                        <div class="col overflow-auto flex-shrink-1 position-relative">
                            <div class="position-absolute">
                                <h5>Subtitle 2</h5>
                                <p> ... content </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container flex-shrink-1">
                <div class="row">
                    <div class="col last-col bg-success text-right"> This should always be at the bottom of the page.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这篇关于Bootstrap 4:可滚动的行，填充剩余的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！