Gabriel F. answered • 10/29/19
Tutor
5.0
(85)
Full Stack Software Developer and Mentor
Hi there. This can be done very easily with flex-box (credits to https://css-tricks.com/couple-takes-sticky-footer/):
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
