How to build a simple CSS layout that expands to the viewport?

Question

I am trying to build this very simple (visually speaking) layout using HTML/CSS that you can see in the wire frame below:

/------------------------------------------\
|                                          |
|                header div                |
|                                          |
|------------------------------------------|
|                                       |S |
|                 main div              |C |
|                                       |R |
|                                       |O |
|                                       |L |
|                                       |L |
|                                       |  |
|                                       |B |
|                                       |A |
|                                       |R |
\------------------------------------------/

It has a 200 pixel high "header" DIV that fills 100% of the view port horizontally and then below it is the "main" DIV that fills 100% of the remaining empty space (horizontally and vertically) with scrolling set to "auto" to account for any overflowing content.

The hard part is getting the "main" DIV to fill this remaining space without using JavaScript. when I cant really use percentage heights and still have the scroll bar be entirely visible.

I guess at this point I am willing to use tables for this basic part of the layout if that becomes the only non-JS option. Semantics wont be an issue.

So how can I go about doing this? An example would be great too!

Answer 1

I think you can only get that behavior, barring the use of javascript that is, by setting static heights. Data won't overflow, thereby causing scrollbars, without a static height. Unless you did something with an Iframe, which I discourage just because of the added load time.

Answer 2

Just tried figuring something out and the closest pure-css solution I can find is to use percentages for both heights and setting the header's min-height to 200px. However when the viewport isn't as big as expected the bottom div goes slightly beyond the fold.

A good solution here would be to go through your statistics and figure our what the most used screen height for your visitors use is, around 800px probably. Then set something like this

#head {
      height: 25% (depending on above figure)
      min-height: 200px;
}
#body {
      height: 75%;
}

This would ensure that your design works perfectly in most cases.

Although why somebody would want to keep everything above the fold in this day and age eludes me to be honest. We've all gotten pretty well used to scrolling and with modern widescreen designs scrolling is rather ubiquitous

Answer 3

display: table or http://www.ironmyers.com/layouts/100%5Fpercent%5FLayouts/

Answer 4

Try using absolute positioning

Answer 5

I suggest you try a well tested layout like this: http://www.cssplay.co.uk/layouts/basics2.html

There you can see how it is done.

Answer 6

I just did something really similar (client work, can't show example, sorry...) You can use margins like so:

#head{
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  height: 200px;
}

#body{
  margin: 200px 0 0 0;
  top: 200px; 
}