CODEWITHSUNDEEP
htmlcss
kev
kev

Reputation: 1115

div filling up all remaining white space (not 3 columns)

I have 3 divs stacked on top of one another:

How can I have div2 take up remaining screen height?

note: i don't want to use javascript.

Upvotes: 0

Views: 946

Answers (2)

CdB
CdB

Reputation: 4908

Maybe something like this: 

<div id="top">
    top div
</div>
<div id="middle">
    middle div
</div>
<div id="bottom">
    bottom div
</div>

#top {
    height: 20px;
}

#bottom {
    height: 20px;
    bottom: 0;
    position: absolute;
    width: 100%;
}

See this code in action: http://jsfiddle.net/PzA3W/

Upvotes: 1

MatTheCat
MatTheCat

Reputation: 18721

<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

#top,#bottom {
    position:absolute;
    height:20px;
    left:0;
    right:0;
}
#top { top:0; }
#bottom { bottom:0; }
#middle {
    position:absolute;
    top:20px;
    bottom:20px;
    left:0;
    right:0;
}

It should work.

Upvotes: 3

Related Questions