There’s a Bootstrap example for a sticky footer that appears at the bottom of the screen even if there is not enough content to take up the rest of the screen height, however the problem with this (for me at least) is that the footer remains stuck to the bottom of the page even when there’s enough content to require scrolling. What I was after was a footer that would appear at the bottom of the page when there wasn’t much content but would not be sticky so that when there’s a lot of content it wouldn’t be visible until the user scrolls down to the bottom of the page.
After a bit of research it turns out this is reasonably simple and just requires the use of the viewport height sizing unit.
The below snippets are from an MVC project using Bootstrap 4.1 though should be applicable to most situations, in it I have a 60px high footer which appears at the bottom of the page.
_Layout.cshtml
<body>
<div class="content">
<div class="container">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="https://mysite.co.uk/">
<img src="~/images/mylogo.png" width="76" height="62" />
</a>
</nav>
</div>
<hr />
<div class="container body-content">
@RenderBody()
</div>
</div>
<footer class="footer">
<div class="container">
<span>Place sticky footer content here.</span>
</div>
</footer>
</body>CSS
.content {
min-height: calc(100vh - 60px);
}
.footer {
background-color: #767676;
min-height: 60px;
} This works because we set the minimum height of the page to be 100% of the browser window minus 60px and the footer to be 60px in height. When there is more content than fits in the browser window the “content” wrapper div height expands and pushes the footer to the bottom of the page and when there’s not much content the min-height property ensures it takes up the available height of the browser.
0 Comments