Split HTML pages into horizontal sections without vertical scrollbars

Question

I am trying to create something like this:

http://jsfiddle.net/S6FUQ/

HTML:

<div id="container"> <header></header> <main> <section class="half"></section> <section class="half"></section> </main> </div> 

And CSS:

 * { margin: 0; padding: 0; } html, body, #container { height: 100%; } header { height: 50px; background: gray; } main { height: 100%; background: green; } .half { height: 50%; } .half:first-child { background: blue; } .half:last-child { background: yellow; } 

In it, I have a thin ribbon at the top, and I want to divide the rest of the screen into two equal parts, but I do not want a vertical scroll bar to appear.

I tried margin-bottom: 50px; for main , but that didn't work. What should I do?

Answer 1

The height of "main" should be 100% - 50 pixels. Here is the fiddle .

 main{height: calc(100% - 50px);} 

Answer 2

To make it work with older browsers, you can use absolute positioning.

Demo

 #container { position: relative; } main { position: absolute; width: 100%; top: 50px; bottom: 0; background: green; } 

Answer 3

You are already using% to set the height ... Why don't you use it again to solve your problem?

 header { height: 10%; background: gray; max-height:50px; //this will ensure your header will never go bigger than 50px } main { height: 90%; background: green; } 

PS: The only time your title is less than 50 pixels when the browser is less than 500 pixels (which will only be on some landscape mobile devices)

EXAMPLE