I am struggling to position the footer on my webpage at the bottom of the screen when there is limited content. If the content height exceeds the screen height, I want the footer to flow below the content instead of staying fixed at the bottom.
Despite trying several suggestions from stackoverflow and other sources, I have not been successful in achieving this.
I am currently attempting to implement the solution provided at the following link, but I am having trouble adapting it to my HTML structure:
https://codepen.io/cbracco/pen/zekgx
HTML
<div class="site-wrapper">
<header>
Header
</header>
<div class="home-body-wrapper">
Body
</div>
<footer>
Footer
</footer>
</div>
Using Bootstrap + Custom CSS
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100%;
background-color: #ffffff;
color: #ffffff;
}
.site-wrapper {
height: 100%;
position: relative;
background-color: #6cacc5;
padding: 50px;
}
.site-wrapper header {
height: 50px;
background-color: #3b5998;
}
.site-wrapper .home-body-wrapper {
min-height: 300px;
background-color: #c97874;
}
.site-wrapper footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 200px;
background-color: #555555;
}