Bootstrap 4 - Full Height Drawer - css

Question

I'm working on an app that uses Bootstrap 4. In addition, I'm using the material design framework. I need this app to take up the entire screen and to use the drawers that are part of the framework. I can successfully get the app to take up the entire screen by using a flexbox. However, I can't seem to get the drawer to take up all of the available height. You can see the issue in this Fiddle. The code in that Fiddle looks like this:
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="d-flex flex-column flex-grow">
<div class="h-100 flex-grow">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
How do I make the drawer take up the entire height between the nav and footer areas?
Thank you

Answer 1

One way is to make the element that wraps .bmd-layout-container a flex parent with flex-direction: column, then set the generated .bmd-layout-canvas class to flex-grow: 1.
$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
body, html {
height: 100%;
}
.flex-grow {
flex: 1 0 auto;
}
.bmd-layout-canvas {
flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js"></script>
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="d-flex flex-column flex-grow">
<div class="h-100 flex-grow d-flex flex-column">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
Here's a fiddle - https://jsfiddle.net/n9c4Lbqa/

Answer 2

You can try setting the height in vh units. 1vh is equal to 1% of the window height (100vh = 100%). If you combine it with calc, you can set it to fill the window height minus the other elements.
.element {
height: calc(100vh - 50px);
}
Replace the 50px with whatever number is enough to clear the height / footer in your design.

Answer 3

Maybe not the prettiest way to do this, but works.
$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
#app {
height: 100vh;
}
.flex-grow {
flex-grow: 1;
}
.fill {
height: 100%;
}
.test-wrap {
position: relative;
}
.test {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" />
<div id="app" class="d-flex flex-column fill">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="flex-grow p-r test-wrap">
<div class="h-100 flex-grow test">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
Here the flex way:
$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
#app {
height: 100vh;
}
.flex-grow {
flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" />
<div id="app" class="d-flex flex-column">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="flex-grow d-flex test-wrap">
<div class="flex-grow test"><!-- removed h-100 -->
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>

Answer 4

Something like this could work:
Fiddle: https://jsfiddle.net/aq9Laaew/105279/
CSS
body, html {
height: 100%;
margin: 0;
}
#app {
min-height: 100%;
}
.flex-grow {
flex: 1 0 auto;
}
.push {
height: 50px;
}
HTML
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="d-flex flex-column flex-grow push">
<div class="h-100 flex-grow">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
<footer class="flex-column h-100">
<p>Thank you for visiting!</p>
</footer>
</div>