This is more of a note to myself but maybe other web developers, especially beginners, will find this information useful. In common situations when your webpage has a header, a main content area and a footer (like this blog), you want your main content area to stretch to the available browser viewport height if your page contains only small amount of content. Unfortunately, by default your block elements are vertically aligned to the top so your footer will be displayed somewhere in the middle of the viewport instead of the bottom. And this is where the new Flexbox layout comes to the rescue. Bootstrap 4 supports Flexbox out of the box (no pun intended) so all you need is to add necessary classes to your HTML elements.
The following example shows how to vertically stretch your main content area to the available browser's viewport height using Bootstrap 4 classes:
<html class="h-100">
<head>
<title>Page title</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<style>
header {
background-color: lightblue;
height: 50px;
}
main {
background-color: lightgray;
}
footer {
background-color: lightgreen;
height: 50px;
}
</style>
</head>
<body class="h-100 d-flex flex-column">
<header>
Header content
</header>
<main class="flex-fill">
Main content
</main>
<footer>
Footer content
</footer>
</body>
</html>That's it. You can copy-paste this code to a local HTML file and see how it looks. For vertical stretching to work you need to add d-flex and flex-column classes to body element and flex-fill class to the element that you need to stretch vertically (main in our case). Note that both html and body elements also have h-100 class that corresponds to height: 100%; CSS style. This is needed for vertical stretching to work correctly. In this example the styles inside style tag are not relevant, I've added them for this example to look better.
The same effect can be obtained without Bootstrap 4. The following example shows how to do the same with pure CSS:
<html>
<head>
<title>Page title</title>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
header {
background-color: lightblue;
height: 50px;
}
main {
background-color: lightgray;
flex: 1 1 auto;
}
footer {
background-color: lightgreen;
height: 50px;
}
</style>
</head>
<body>
<header>
Header content
</header>
<main>
Main content
</main>
<footer>
Footer content
</footer>
</body>
</html>Note that body tag now has display: flex; and flex-direction: column; styles and main tag has flex: 1 1 auto; style. Again, both html and body tags also have their heights set to 100%.
Those Bootstrap 4 classes and/or CSS styles can be applied to any block elements, e.g. div, not just the ones shown in the preceding examples. However, for vertical stretching to work correctly all the enclosing block elements up to html must have their heights set to 100%. Flexbox layout is supported by all modern browsers so you shouldn' have any problems with that, unless you are targeting some ancient systems.
