How to set footer position on bottom at least, using flexbox
A Pen by Rulo Kobashikawa on CodePen.
<div class="container"> | |
<header>HEADER</header> | |
<main> | |
<h1>MAIN</h1> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus sequi nulla praesentium laboriosam fugiat, reiciendis, cupiditate numquam temporibus, dolorem repellat blanditiis accusamus aspernatur corporis officiis sit veritatis molestias aperiam qui. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, consequuntur. Provident fugit quos consectetur vero libero, ut, quas similique porro tempora rerum dignissimos, itaque eveniet, eaque non eligendi necessitatibus inventore. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, rerum, deserunt. Harum dignissimos quasi consequatur nihil, sed. Iste, expedita laborum. Veniam deserunt optio laboriosam modi id nam! Nemo, deserunt totam! | |
</p> | |
</main> | |
<footer>FOOTER</footer> | |
</div> |
html, body { | |
height: 100%; | |
} | |
body { | |
margin: 0; | |
} | |
.container { | |
height: 100%; | |
background: blue; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
} | |
header { | |
background: cyan; | |
flex-shrink: 0; | |
flex-basis: 50px; | |
} | |
main { | |
background: lime; | |
flex: 1; | |
} | |
footer { | |
background: orange; | |
flex-shrink: 0; | |
flex-basis: 60px; | |
} |