CODEWITHSUNDEEP
csshtmlresizeheight
Ahmad
Ahmad

Reputation: 5760

CSS How to set div height to 100% minus some pixels

I'm trying to design a web page these days that is a bit hard.

I have three main divs. First one for header, another for footer, and third one for main content. Header and footer must be fixed in top and bottom of the page. Their place mustn't change with resizing of browser window. Third div must be in the blank space between those divs. It can resize to fit the page with window resize.

Height of main div must exactly change, because I want to place a Google Maps in that div, so the height of this div is important.

I tried so many things, but they were not successful. Setting height of the div to 100%(while height of body and html is 100%, too) was not the answer. Using a table (with three rows, two rows with fixed height, one row with variable height, with height="100%") had some problems, too(in IE8, when I declared a doctype, the div in second row (with height:100%) didn't fit the cell anymore!).

Now I have no idea to do this work. What can I do?

Note: I prefer not to use CSS3, because compatibility with old browsers is important for me.

Upvotes: 0

Views: 7876

Answers (4)

user3072466
user3072466

Reputation: 1

This is one of the shortcomings of css. You cannot accomplish what you want using just those three divs. You need to use additional divs to offset the height of your header and footer. Here is how to solve this:

<body style="height:100%; margin:0; padding:0;">
    <div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div>
    <div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat">
        <div id="header-offset" style="height:50px;"></div>
        <div id="footer-offset" style="height:70px;"></div>
    </div>
    <div id="footer" style="height:70px; background-color:lightblue;"></div>
</body>

Upvotes: 0

Scott Sword
Scott Sword

Reputation: 4718

You could try something like this.

HTML 

   <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>

CSS 

#header {
    height:50px;
    width: 100%;
    background: black;
    position: fixed;
    z-index: 1;
    top: 0;
}

#body {
    height:100%;
    width: 100%;
    background: #CCC;
    position: absolute;
    z-index: 0;
}

#footer {
    height: 50px;
    width: 100%;
    background: #0CF;
    position: fixed;
    bottom: 0;
}

Here is a fiddle - http://jsfiddle.net/6M59T/

Upvotes: 1

Ruffo
Ruffo

Reputation: 420

You should try the well known Clearfix hack to handle height issues, because you need to "clear" parents elements to get that full 100% height you need.

Upvotes: 0

ylysyym
ylysyym

Reputation: 430

Use a set height for your header, and use sticky footer to keep your footer a set height and aligned to the bottom as well. The space in between should then always be the right height.

Upvotes: 0

Related Questions