0
107
VisualizaçõesFooter overlapping content when trying to make it stay at the bottom of the page
I'm trying to make footer on the bottom of the page, but it's overlapping the content. Like this:
body, html , #root
html, body, #root {
height: 100%;
}
#root , body {
display: flex;
flex-direction: column;
}
footer
position:absolute,
bottom:0,
width:100%
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
That's because you set position:absolute on the footer. There are simpler ways of fixing your footer at the bottom. Say your project structure is like this, notice there are three direct children inside .app:
<html>
<body>
<div id= "root">
<div class= "app">
<Header></Header>
<Content></Content>
<Footer></Footer>
</div>
</div>
</body>
</html>
All you would need is:
.app {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
/* gap: 3rem; */
}
·
Juan Pablo Isaza
Relatório
0
Maybe this helps you.
body{ height:100vh; margin:0; }
header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }
/* Trick */
body{
display:flex;
flex-direction:column;
}
footer{
margin-top:auto;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
If you want to stick to position absolute
body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
·
Juan Pablo Isaza
Relatório
Responde à pergunta