modos de manter footer to the bottom:
stackoverflow
eg: using min-height
footer's height, that I already knew was 40px.
<![CDATA[
<article class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</article>
<footer>
<!-- Footer content -->
footer
</footer>
]]>
<![CDATA[
.allButFooter {
min-height: calc(100vh - 40px);
}
footer {
background: gray;
height: 40px;
}
]]>
e.g: absolute
It's not very responsive, because if you have a device with a smaller
height (e.g. a mobile device) and the content will naturally overflow the
viewer height, the footer will overlay on your content because of its
absolute positioning
se o conteúdo for maior que o footer, o footer vai ficar por cima
<![CDATA[
footer {
position: absolute;
bottom: 0;
background: gray;
width: 100%;
}
]]>
eg: position fixed
se o conteudo for maior que o footer, footer fica fixed, pode ser indicado
para menu bottom fixed
<![CDATA[
<article>
<p>ssLorem ipsum dolor, sit amet consectetur adipisicing elit. Libero assumenda officia autem quisquam amet
iste
voluptatibus natus praesentium in
doloremque dicta quo iste. Fugit esse eius, ad unde quae aliquam voluptate optio ullam. Voluptates
sapiente
esse architecto delectus labore asperiores, laborum nam voluptate itaque. Voluptatum dolores </p>
<h1>23232</h1>
</article>
<footer>
<h1>footer</h1>
</footer>
]]>
<![CDATA[
footer {
position: fixed;
width: 100%;
background: gray;
bottom: 0;
}
]]>
eg: flex column
to updated or remove flex_container_main.html
<![CDATA[
main {
display: flex;
flex-flow: column;
min-height: 100dvh;
}
article {
flex: 1;
}
]]>
<![CDATA[
<main>
<header>header</header>
<article>
<p>article</p>
</article>
<footer>
footer
</footer>
</main>
]]>
eg: grid:
<![CDATA[
#grid-container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100vh;
min-height: 100svh;
}
]]>
<![CDATA[
<div id="grid-container">
<header>
Header
</header>
<article>
Main content
<p>lorem1000</p>
</article>
<footer>
Footer
</footer>
</div>
]]>