0
106
ViewsFooter 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 answers
Answer question0
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
Report
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
Report
Answer question