Question:
I have a page in which there is a div with various contents inside, which change according to the user's desire. Just below there is another div which is the Footer.
If I put a position: relative , the footer will adjust its position according to the page size, but it doesn't get "stuck" at the bottom (no space until the end of the page) when the browser window is resized to a smaller size.
On the other hand, if I put a position: absolute , the footer will be fixed at the bottom of the page, but it won't fit the window size.
But I would like to set a bottom: 0px , similar to what happens if I apply a position: absolute , but such that if the page content is larger, the footer doesn't overlap the page.
Does anyone know how it would be possible to do this?
My example is here on JsFiddle .
Answer:
Solution with FLEXBOX and VH
I made a jsfiddle with the perfect solution to your problem with only 4 css properties in your application container using flexbox and vh as relative unit, understand better with the code below:
<section class="container">
<main></main>
<div class="footer"></div>
</section>
.container{
height: 100vh;
display: flex;
flex-direction: column:
justify-content: space-between;
}
This ensures that the .container always has the exact height of the viewport and that the <main></main> is always at the beginning of the .container and the .footer is always at the end, and when the content is inside the <main></main> exceeds viweport dimensions, .footer tracks content without overlapping.
See more here in this JSFIDDLE
And on this link a guide about FLEXBOX