0
109
VistasFooter 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 Respuestas
Responde la pregunta0
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
Denunciar
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
Denunciar
Responde la pregunta