Bootstrap 4:可滚动行，填充剩余高度 [英] Bootstrap 4: Scrollable row, which fills remaining height

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

问题描述

在 Bootstrap 4 中，我想有一排，它填满页面的剩余高度，但它的内容不应超出给定位置的高度.内容应该可以通过按钮滚动，滚动条最好不可见.

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

JSFiddle

HTML:

<html lang="de"><头><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>测试</title><身体><div id="包装器"><div id="sidebar-wrapper"><ul class="sidebar-nav"><li>测试1</li><li>测试2</li><li>测试3</li>

<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 class="container h-100 flex-column d-flex"><div class="row"><div class="col header-col bg-warning"><h5 class="align-middle">标题 1</h5>

<div class="section-div h-100 flex-column d-flex"><div class="row bg-success"><div class="col"><h5>副标题1</h5>

<div class="row flex-fill bg-danger d-flex"><div class="col"><h5>副标题2</h5><p>这应该填充剩余的高度，但内容不应使用比可用空间更多的空间.所以它应该是可滚动的，最好没有滚动条和按钮滚动</p>

<div class="容器"><div class="row"><div class="col last-col bg-success text-right">这应该始终位于页面底部.<button class="btn btn-primary btn-scroll-up" type="button">向上滚动</button><button class="btn btn-primary btn-scroll-down" type="button">向下滚动</button>

<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>

CSS:

html {高度:100%；}身体 {溢出-x:隐藏；高度:100%；}.flex-fill {弹性:1；}.startpage-col, .headline-col {边框左上角半径:15px 15px；边框右上角半径:15px 15px；}.headline-col {高度:40px；行高:40px；}.headline-col h5 {垂直对齐:中间；显示:内联块；}.last-col {边框左下角半径:15px 15px；边框右下角半径:15px 15px；高度:50px；}#包装{填充左:0;-webkit-transition:所有 0.5 秒轻松；-moz-transition:所有 0.5 秒轻松；-o-transition:所有 0.5 秒的缓和；过渡:全0.5s缓动；高度:100%；}#wrapper.toggled {padding-left: 350px;}#sidebar-wrapper {z-索引:1000；位置:固定；左:350px；宽度:0；高度:100%；左边距:-350px；溢出-y:自动；背景:#fff;-webkit-transition:所有 0.5 秒轻松；-moz-transition:所有 0.5 秒轻松；-o-transition:所有 0.5 秒的缓和；过渡:全0.5s缓动；}#wrapper.toggled #sidebar-wrapper {宽度:350px；}#page-content-wrapper {宽度:100%；高度:100%；位置:绝对；填充:15px；背景:#000；}#wrapper.toggled #page-content-wrapper {位置:绝对；边距右:-350px；}/* 侧边栏样式 */.sidebar-nav {位置:绝对；顶部:0；宽度:350px；边距:0；填充:0；列表样式:无；}.sidebar-nav li {文本缩进:20px；行高:40px；}.sidebar-nav li {文本缩进:0px；}.sidebar-nav li a {显示:块；文字装饰:无；颜色:#666；}.sidebar-nav li a:hover {文字装饰:无；颜色:#000；}.sidebar-nav li a:active, .sidebar-nav li a:focus {文字装饰:无；颜色:#000；}.sidebar-nav>.sidebar-brand {高度:65px；字体大小:18px；行高:60px；}.sidebar-nav>.sidebar-brand a {颜色:#999999；}.sidebar-nav>.sidebar-brand a:hover {颜色:#fff;背景:无；}@media(最小宽度:768px){#包装{填充左:0;}#wrapper.toggled {padding-left: 350px;}#sidebar-wrapper {宽度:0；}#wrapper.toggled #sidebar-wrapper {宽度:350px；}#page-content-wrapper {填充:20px；位置:相对；}#wrapper.toggled #page-content-wrapper {位置:相对；右边距:0;}}

JS:

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

非常感谢！

解决方案

我遇到了类似的问题:Bootstrap 4 中嵌套 flex-grow 框的 Flexbox 高度问题

而不是使用 h-100.这将强制容器为视口高度的 100% 而不是剩余高度，请使用 Bootstrap 4.1 flex 增长实用程序...

然后在适当的 div 上设置 overflow:auto 使其滚动.

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

模板(仅使用 Bootstrap 类):

<div id="sidebar-wrapper"><ul class="sidebar-nav">...
<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 class="container flex-fill flex-column d-flex"><div class="row flex-shrink-0"><div class="col header-col bg-warning"><h5 class="align-middle">标题 1</h5>
<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>副标题1</h5>
<div class="row flex-fill bg-danger d-flex"><div class="col overflow-auto flex-shrink-1 position-relative"><div class="position-absolute"><h5>副标题2</h5><p>...内容
<div class="container flex-shrink-1"><div class="row"><div class="col last-col bg-success text-right">这应该始终位于页面底部.

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');
});

Thank you very much!

解决方案

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

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...

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

Demo: https://codeply.com/go/lk58xAjDc7

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:可滚动行，填充剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆