Fitting html div to screen with a scrollbar - html

Question

I'm creating a site where the basic design consists of a few blocks on top of each other, something like this:
The first three divs are of set height and width, and the main area is also of a fixed width, with the whole thing centered horizontally on the screen. I want the main area to extend to the bottom of the screen, whatever the screen size and proportions, and to use a scroll bar within it if the contents extends beyond the bottom of the screen.
The problem I have found is that to use a scroll bar it seems you need an absolute height, so I haven't been able to find any method for fitting it and being able to scroll through the contents at the same time.
Any ideas?

Answer 1

Here's one way of doing this. I know there might be too many divs that are just for the look of the page, making it not 100% semantic. Anyway, here you go:
http://jsfiddle.net/vSt3Z/
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="content">
<div class="inner">
<div class="scroller">
Content
</div>
</div>
</div>
And the CSS:
.one, .two, .three {
height: 40px;
margin: 0;
padding: 0;
}
.content {
background: yellowgreen;
position: absolute;
top: 0;
left: 0;
z-index: -1;
padding-top: 120px;
width: 100%;
height: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.content .inner {
height: 100%;
overflow-y: scroll;
}
.content .inner .scroller {
height: 1200px;
}
Please ignore this:
* {
margin: 0;
padding: 0;
}
it's there just to remove an annoying default padding from jsfiddle

Answer 2

Use calc with min-height:
HTML:
<div class="first block"></div>
<div class="second block"></div>
<div class="third block"></div>
<div class="main"></div>
CSS:
html,body{
height:100%;
width:100%;
padding:0;
margin:0;
}
.block{
width:100%;
height:100px;
}
.first{
background:red;
}
.second{
background:blue;
}
.third{
background:yellow;
}
.main{
min-height: calc(100% - 300px);
width:100%;
background:green;
}
JSFiddle
caniuse calc

Answer 3

In my opinion this is the simplest method:
DEMO: http://jsfiddle.net/ZPU5Z/
This does not put a scroll bar on the main #content section only but on the whole document. Unless you have a really compelling reason to do otherwise I suggest keeping things simple (and therefore highly compatible too!).
HTML
<div id="fixed-header">
<div id="header">Header</div>
<div id="bar1">Bar 1</div>
<div id="bar2">Bar 2</div>
</div>
<div id="content">
Main area
</div>
CSS
* {
margin: 0;
padding: 0;
border: 0;
color: white;
}
body {
background-color: blue;
}
#fixed-header {
position: fixed;
top: 0;
width: 100%;
}
#header {
background-color: black;
text-transform: uppercase;
height: 50px;
}
#bar1 {
height: 25px;
background-color: red;
}
#bar2 {
height: 25px;
background-color: green;
}
#content {
padding-top: 100px; /* header + bar1 + bar2 */
}