Bootstrap 4：可滚动行，填充剩余高度
Posted
技术标签:
【中文标题】Bootstrap 4：可滚动行，填充剩余高度【英文标题】：Bootstrap 4: Scrollable row, which fills remaining height 【发布时间】：2018-10-21 22:30:49 【问题描述】：对于 Bootstrap 4，我想要一行，它填满页面的剩余高度，但它的内容不应该将高度扩展到给定的位置。内容应该可以通过按钮滚动，滚动条最好不可见。
我试图将我的布局分解为这个。请随时纠正 - 这真的不是我的强项。
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');
);
非常感谢！
【问题讨论】：
为什么是-1？我做错了什么？我添加了所有必需的文件，甚至是一个小提琴？我付出了很多。 【参考方案1】：Zim 的解决方案简化：
<html class="h-100">
<body class="h-100">
<div class="h-100 d-flex flex-column">
<div style="background: lightblue;">
top
</div>
<div class="flex-grow-1 overflow-auto" style="background: lightgreen;">
bottom
</div>
</div>
</body>
</html>
【讨论】：
【参考方案2】：我也有类似的问题：Flexbox height issue with nested flex-grow boxes in Bootstrap 4
而不是使用h-100。这将强制容器为视口高度的 100% 而不是剩余高度，请使用 Bootstrap 4.1 flex grow utils...
flex-grow-1 填充弹性容器的剩余高度
flex-shrink-0 使其他行缩小而不挤压
然后在适当的 div 上设置 overflow:auto 以便它滚动。
演示：https://codeply.com/go/lk58xAjDc7
模板（仅使用 Bootstrap 类）：
<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>
【讨论】：
:-( 这在 Firefox 中不起作用（开发者版 57.0b9） @Phantom 在最新的 FF 中确实有效 - 请接受答案，以便其他人知道问题已解决。 它在 chrome 中也不起作用。如果我用大量内容填充红色 div，底部 div 不再可见，您需要滚动页面 我更新了答案演示。它现在在 FF 和 Chrome 中都可以使用。以上是关于Bootstrap 4：可滚动行，填充剩余高度的主要内容，如果未能解决你的问题，请参考以下文章
可滚动的 div 占用剩余高度（Bootstrap 4 Flexbox 网格系统）
Bootstrap 4 导航栏和内容填充高度 flexbox
如何使用 Bootstrap（我猜）让 iframe 填充剩余屏幕区域的宽度和高度？