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!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
