Question:
I have a page in which there is a div with several contents inside, which are modified according to the user's wishes. Just below there is another div that 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 (with no space at the end of the page) when the browser window is resized to a smaller size.
If I put a position: absolute , the footer will be fixed at the bottom of the page, but it won't fit the size of the window.
But I would like to set a bottom: 0px , similar to what happens if I apply a position: absolute , but in such a way that if the page content is longer, the footer doesn't overlap the page.
Does anyone know how this could be done?
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 a 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 is always 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 inside the <main></main> exceeds the dimensions of the viweport, the .footer follows the content without overlapping.
See more here in this JSFIDLE
And in this link a guide on FLEXBOX