I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. The header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the content divs height because the screen resolution can change.
7 Answers
To summarize (and this came from the CSS Sticky Footer link provided by Traingamer), this is what I used:
html, body
{
height: 100%;
}
#divHeader
{
height: 100px;
}
#divContent
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
}
#divFooter, #divPush
{
height: 100px; /*Push must be same height as Footer */
}
<div id="divContent">
<div id="divHeader">
Header
</div>
Content Text
<div id="divPush"></div>
</div>
<div id="divFooter">
Footer
</div>
To expand on Mitchel Sellers answer, give your content div height: 100% and give it a auto margin.
For a full explanation and example, see Ryan Fait's CSS Sticky Footer.
Since you know the size (height) of your header, put it inside the content div (or use margins).
Position absolute will give you problems if your content is larger (taller) than the window.
A way to do this using CSS Grid:
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<body>
<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main>
</body>
</html>
main.css
body {
margin: 0;
}
main {
height: 100%;
display: grid;
grid-template-rows: 100px auto 100px;
}
section {
height: 100%;
}
Use CSS grid instead it is supported by nearly all the browser
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
.main-body{
display: grid;
/* let content auto to occupy remaining height and pass value in fit-content with min-height for header and footer */
grid-template-rows: fit-content(8rem) auto fit-content(8rem);
grid-template-areas: "header" "main" "footer";
}
.main-header{
background-color: yellow;
grid-area: header;
}
.main-content{
grid-area: main;
}
.main-footer{
background-color: green;
grid-area: footer;
}<body class="main-body">
<header class="main-header">
HEADER
</header>
<main class="main-content">
this is content
</main>
<footer class="main-footer">
this is footer
</footer>
</body>if you are trying to maximize the height of your content div, in the CSS add
height: 100%;
Related