CODEWITHSUNDEEP
html
automaton
automaton

Reputation: 3068

HTML fixed div with relative div

I am looking for two divs that look like this:

<div style="height:20px;" />
<div style="height:100%;" />

This gives me two divs, one with 20px height, and the other at 100% of the entire screen height, which puts a vertical scroll bar worth 20px. What I actually want is one to be 20px, and the other to be 100%-20px. I know that IE has calc() method, but isn't there a much easier way to do this that will work in all browsers?

Upvotes: 1

Views: 273

Answers (4)

Achshar
Achshar

Reputation: 5243

#div1 {
    height:20px;
    position:fixed;
    top:0px;
    right:0px;
    left:0px;
} 
#div2 {
    position:absolute;
    top:20px;
    bottom:0px;
    right:0px;
    left:0px;
}

maybe this is what you need..

EDIT sorry misread the title.. corrected :O how ever if you wish to have multiple div2 the you might need a structure like

<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>

Upvotes: 1

Colin
Colin

Reputation: 2021

It is possible without any Javascript if you can provide a fixed width:

http://jsfiddle.net/mNNeq/47/

The following is an excellent resource to help you with positioning content:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Upvotes: 0

George Cummins
George Cummins

Reputation: 28906

There is an easy way: Place the first div (20px) inside the second.

EDIT: Since my first answer is not an option for you, you can use scripting to resize the div on the fly. You can caclulate document.height - 20px and apply the result as the height of the "100%" div. CSS does not offer a way to do:

height: 100% - 20px

However, Javascript does:

(via jQuery:)

$( "#big_div" ).height( $( document ).height() - 20 );

Upvotes: 0

cobaltduck
cobaltduck

Reputation: 1598

I tried this out, adding a little sample text to your div, and got rid of the scroll bar simply by not giving the second div a height, and allowing the broswer (both IE and FF) to figure out for itself what hieght to give it.

However, given your comment to George, I think this may not be your fix either. Perhaps you could post a little bit more of your code (or psuedo-code) to give at least one typical example of the second div being replaced.

Upvotes: 0

Related Questions