0

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.

Tomas Ramirez Sarduy
  • 17,294
  • 8
  • 69
  • 85
Ahmad
  • 5,551
  • 8
  • 41
  • 57
  • Add some code and maybe you get some answers. What about `margin-bottom: -99 px` or something like that? – Tomas Ramirez Sarduy Feb 04 '13 at 20:33
  • There's a good answer here that uses pure CSS3 and works with Google Maps http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – Craig Feb 04 '14 at 21:00

4 Answers4

1

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/

Scott Sword
  • 4,648
  • 6
  • 32
  • 37
0

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.

Lrdwhyt
  • 430
  • 5
  • 22
  • Can you explain more?I think I did something like this before, but it was not useful. – Ahmad Feb 04 '13 at 20:36
  • 1
    @user1919959 It's a bit unclear as to what you need, but if the layout on the link is what you wanted, i.e. the header and footer have set heights and are aligned to their respective sides of the page, and the body will change height depending on the content or size of the window, then that is my best recommendation. – Lrdwhyt Feb 04 '13 at 20:38
  • Ok, I know, but this method creates scrollbar and it's not my goal. Am I wrong? – Ahmad Feb 04 '13 at 20:59
  • @user1919959 I don't see any scrollbar on the example site - did you actually implement it and get a scrollbar? You shouldn't – Lrdwhyt Feb 04 '13 at 21:05
  • You are right, but the problem is that we can't have a div in the middle of two divs with height. Height is so important, because of google maps. I think JQuery is the best way. – Ahmad Feb 04 '13 at 21:19
  • @user1919959 [Here is an example](http://jsfiddle.net/PMVy2/) of sticky footer, if that's at all helpful. – Lrdwhyt Feb 04 '13 at 21:28
0

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.

Ruffo
  • 420
  • 1
  • 5
  • 14
0

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>
user3072466
  • 1