Make the div content fill the remaining height
I have a page layout where I have a header fixed
that can have any height and a footer positioned at the bottom of the page. I am looking for a css solution so that the content of the div fills the remaining space (vertically). In the jsfiddle below, I tried to do this, but as you can see, the content is behind the footer.
HTML:
<main>
<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<section>
<div class="content"><div>
</section>
<footer></footer>
</main>
CSS
header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
html, body, main, section {
height: 100%;
display: block;
}
.content{
background-color: #000;
height: 100%;
}
footer {
background-color: #def;
bottom: 0;
display: block;
height: 54px;
position: absolute;
width: 100%;
}
Is this possible with pure css (3)?
source to share
It's a bit of an ugly solution, but if you set the margin-top of the div content to be -54px and add a div inside it with padding-top: 54px, it works as expected.
HTML:
<div class="content"><div class="contentwrapper"></div><div>
CSS
.contentwrapper {
padding-top:54px;
}
.content{
background-color: #000;
height: 100%;
margin-top:-54px;
}
Fiddle: http://jsfiddle.net/dohqn8m4/1/
source to share
Here's a different approach:
HTML:
<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<main>
<section>
<div class="content"></div>
</section>
<div class="push"></div>
</main>
<footer></footer>
CSS
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
border: 0;
}
header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0;
right: 0;
left: 0;
}
main {
min-height: 100%;
height: auto !important;
margin-bottom: -54px;
}
main > section{
padding-top: 72px;
}
.content {
background-color: #000;
}
.push {
height: 54px;
}
footer {
background-color: #def;
height: 54px;
}
The footer is now always at the bottom as the content does not fill the hole page. In this case, the "push" element provides enough room to opt out of overlapping the footer and content.
Your div content is now below the footer through the padding. The height is actually 0 due to missing content. In my approach, the content div always inserts the content.
Keep in mind that a) for a flexible purpose you should have been aware of the header height and adjust the section padding with media queries b) the same for the footer. Adjust the height of the pushing element and adjust its value.
source to share
I made a sticky footer using this tutorial . I think it's easy and convenient to use.
CSS CODE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Html code
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
source to share