CODEWITHSUNDEEP
htmlcss
Jürgen Paul
Jürgen Paul

Reputation: 15007

make DIV take all lower space

Let's say for example:

<header>Hello</header>
<div role="main">Body</div>
<footer>&copy;</footer>

header {
    height:20px;
    background: #edf1f5;
}
div {
    background:#ddd;
    padding:20px;
}
footer {
    background: #e4e8ec;
}​

How do you make footer take up all the remaining space? I am not aiming to have a sticky footer here, I just want the footer to fill up the space.

Here's a Jsfiddle: http://jsfiddle.net/XF3E7/

Upvotes: 1

Views: 333

Answers (4)

J&#252;rgen Paul
J&#252;rgen Paul

Reputation: 15007

Sadly I was able to answer my own question:

http://jsfiddle.net/XF3E7/14/

Upvotes: 0

Ahmed Masud
Ahmed Masud

Reputation: 22372

You just have to play with the css

http://jsfiddle.net/XF3E7/10/

Upvotes: 0

Florian Margaine
Florian Margaine

Reputation: 60737

I guess you want something like this? http://jsfiddle.net/Ralt/XF3E7/5/

But no scrolling heh? It's not possible without javascript or using tables.

I'd indeed suggest using a background color as @Ollie said.

Upvotes: 0

Ollie
Ollie

Reputation: 656

I've always used a work around for this. If you make the body background colour the same as the footer it creates the illusion of it extending down the page. http://jsfiddle.net/ollie/q3xzh/1/

header {
height:20px;
background: #edf1f5;
}
div {
background:#ddd;
padding:20px;
}
footer {
background: #e4e8ec;
}
body {background:#e4e8ec;}

Upvotes: 3

Related Questions