Pinning footer div to bottom of screen [duplicate] - html

Question

This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 1 year ago.
Say we have a div with two children divs:
<div id="parent" style=height:"100%">
<div id="mainbody"></div>
<div id="footer"></div>
</div>
I want the footer div to be pinned at the bottom of the screen, and mainbody top be on top. There may be a lot of vertical content in mainbody, so I want the scroll bar to only show in the mainbody div. Here is a crudely drawn example:
https://imgur.com/a/lNyOZme
How can I achieve this?

Answer 1

You can achieve this layout pretty easily with flexbox and a bit of height calculations.
body {
margin: 0;
}
main {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
section {
background: ivory;
padding: 2rem;
overflow-y: scroll;
height: calc(100% - 50px);
}
footer {
height: 50px;
background: royalblue;
color: white;
padding: 1rem;
}
footer p {
text-align: center;
}
<main>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae mauris commodo velit cursus maximus. Vivamus congue, massa sit amet egestas tempus, nisl arcu vestibulum diam, auctor porta ligula ligula aliquam dolor. Aliquam tincidunt ligula id arcu eleifend, ut viverra neque faucibus. Sed a augue arcu. Sed mattis neque sit amet elit maximus, eget suscipit felis tristique. Sed in tincidunt ipsum. Nulla lectus magna, eleifend eget risus vel, blandit euismod leo. Vivamus egestas, libero sit amet vulputate volutpat, justo massa venenatis libero, quis consectetur ante erat vitae magna. Nullam dictum luctus purus non porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>
Nullam vehicula ullamcorper convallis. Nunc non metus scelerisque, fringilla nisl nec, vulputate libero. Fusce mattis, enim in laoreet pretium, sapien nisi pellentesque felis, non pellentesque felis justo non est. Duis mollis euismod diam, vitae suscipit orci laoreet eu. Ut pulvinar iaculis massa ut mollis. Nunc a elementum velit. Nam porttitor turpis sit amet enim tempor cursus. Duis tempus lectus nibh, quis luctus neque euismod vel. Vivamus porta sem sed ante ultricies, a pretium mi fringilla. Sed interdum elit mi, a scelerisque quam accumsan eu. Phasellus non nulla fringilla, ultrices magna ut, accumsan orci. Curabitur bibendum nisi quis felis eleifend, ut feugiat mauris elementum. Pellentesque tempor eu sem vestibulum laoreet. Etiam ut vestibulum est, eu placerat tellus. Vivamus ac feugiat metus. In hac habitasse platea dictumst.
</p>
<p>
Suspendisse in urna ac erat vestibulum porttitor eget et massa. Integer faucibus ligula sem, eu consectetur leo pellentesque in. Phasellus faucibus turpis non turpis rhoncus ornare. Maecenas nec feugiat erat. Maecenas nec velit tempus, blandit tellus ac, ullamcorper nisi. Etiam ullamcorper nisi id hendrerit tristique. Nullam neque tellus, tincidunt sed congue quis, finibus non nunc. Aliquam vel mauris ante. Aliquam erat volutpat. Integer condimentum, odio in tincidunt sagittis, felis nulla auctor dolor, a malesuada magna nibh quis lectus.
</p>
<p>
Phasellus condimentum augue sit amet erat scelerisque cursus. Sed eget egestas leo, eu placerat eros. Suspendisse potenti. Maecenas varius vestibulum libero, a ullamcorper nisl convallis vel. Donec a ligula id nibh porttitor consequat. Quisque sodales, diam eget finibus dignissim, dui libero fermentum arcu, eget finibus felis orci eu erat. Nullam eleifend sem vitae nulla convallis varius. Suspendisse posuere neque pulvinar consequat faucibus. Mauris quis mauris eu turpis feugiat vestibulum. Etiam laoreet quam ipsum, mollis iaculis neque laoreet et. Quisque volutpat nisl ut sapien tempus, sed vestibulum mauris pharetra. Cras lacinia in arcu eget vestibulum. Maecenas non suscipit velit.
<p>
Praesent convallis fringilla mauris ut tincidunt. Vivamus aliquet ac magna at vehicula. Proin sapien lacus, malesuada id risus vitae, faucibus eleifend sem. Vestibulum nibh elit, dignissim nec augue a, finibus tempus mauris. Donec sed pharetra elit, a imperdiet ipsum. Nullam et est sed risus rutrum finibus. Suspendisse sit amet sem ut quam dignissim rutrum in in odio. Aliquam a lorem orci. Pellentesque varius faucibus ultricies. Cras et pulvinar diam. Praesent id pretium tellus. Donec nec turpis massa. Vivamus ac diam pharetra, accumsan elit vel, efficitur dui. Duis sollicitudin orci nisl, sed gravida urna sagittis vitae.</p>
</section>
<footer>
<p>
footer content
</p>
</footer>
</main>

Answer 2

Assigning a height to the bottom div won't always guarantee you that it'll be placed at the bottom. I'd recommend to simply make use of position property in css. The code below will work with any height you'll assign to your parent container -
#footer{
position: absolute;
bottom: 0px;
}
P.S. - In case the main body is not that big that it doesn't occupy the whole screen and you still want your footer to be at bottom, assign this height: 100vh to your parent container and use the same above code. It should look like this:
#parent{
height: 100vh;
}
#footer{
position: absolute;
bottom: 0px;
}