Menu
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!
793
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...
flex-grow-1 to fill remaining height of flex containerflex-shrink-0 to make other rows shrink without squishingThen 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
