Div to fill remaining space

HTML & CSS
1

I’m working on a layout that has a regular footer at the bottom which is set to 60px high. I’d like to have another div below the footer that would fill the remaining view port space with a background color. I can’t really do it with a background image because the content area above the footer has flexible height. If I set the div I’m trying to fill the space with to 100% I get a scroll with the length of the entire page below the fold. Anybody cares to help?

Here’s the code.

.footer {width: 960px; background-color: #b3b2ae; height: 60px;}

.footer_bg {background-color: #d3d2cf; min-height: 100%; margin-top: -60px;}

<div class="footer"></div>

<div class="footer_bg"></div>
2

The easiest solution would be to put a repeating background image on the body element, that will repeat to the bottom of the page. Your wrapper would have a background color to hide the body decoration where it isn’t wanted.

An alternative is to set your page to height: 100%. There’s a step-by-step guide to that here:

3

Thanks for the response. I’ve read a few different threads like the one you posted but I’m not sure whether that will do what I’m looking for. I’ve prepared a quick layout to better illustrate what I’m trying to do. If you can suggest the best way of going about achieving the footer_bg filling up the bottom part of the viewport that’d be great.

Sorry I can’t upload the image here for some reason so I posted it on a server. Hope that’s ok.

www.summerlime.com/image/example.jpg

4

The link is fine. The easiest way to do a layout like that is, firstly, to set the background color on the <body> element to the color of the footer. Then create a series of 100% wide divs to imitate the bands of color across the screen—each with an appropriate background color. Inside each of those divs place a centered div—one for the navigation, one for the banner, one for the content etc. That’s a nice, bulletproof way to do this that will expand as much as needed and always give you that footer color all the way to the bottom, and it involves no tricky hacks like 100% height. (In fact, this layout is usually the way I lay out sites myself. :slight_smile: )

5

Here is a quick example of what I mean:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout</title>
<style>
body, p {margin: 0; padding: 0;}
body {background: #888;}
.nav-outer, .ban-outer, .cont-outer, .foot-outer {width: 100%;}
.nav, .ban, .cont, .foot {width: 800px; margin: 0 auto; background: rgba(0,0,0, 0.2); text-align: center;}
.nav-outer, .cont-outer {background: #ccc;}
.nav {min-height: 50px;}
.ban {min-height: 100px;}
.cont {min-height: 150px;}
.foot {min-height: 50px;}

</style>
</head>
<body>

<div class="nav-outer">
    <div class="nav">
        <p>Navigation div</p>
    </div>
</div>

<div class="ban-outer">
    <div class="ban">
        <p>Banner div</p>
    </div>
</div>

<div class="cont-outer">
    <div class="cont">
        <p>Content div</p>
    </div>
</div>

<div class="foot-outer">
    <div class="foot">
        <p>Footer div</p>
    </div>
</div>
</body>
</html>
6

That is an excellent and very elegant solution. I knew there’d have to be an easier way of going about it, but sometimes you just need to see it front of you to realize what you’ve been missing all along. Appreciate your help!

7

Glad you liked it, and thanks for the feedback. :slight_smile:

By the way, I just put those min-heights in there so that there’d be something to look at on first viewing. They aren’t needed once there’s content in there, of course.