Three row divs

Question

css

It is necessary to lay out the page layout in such a way that it consists of three lines - divs.

The top and bottom rows are fixed height, the top row is flush to the top of the page, the bottom row is flush to the bottom of the page.

The main content in the central line, in case of lack of space, a scroll should appear in it. The center div should always take up all the available height left from the top and bottom rows.

I can do this with tables with frames. I would like to learn how to make divs, see how people live. Tried all sorts of template generators, did not find a suitable option.

Answer 1

top div with fixed width.
the bottom div is also fixed.
the script defines the height of the central div equal to the height of the browser window minus the height of 2 fixed divs. set the same central div to overflow:auto;

Answer 2

you can do this for example .

Answer 3

Scripts are redundant here.
Here I sketched an approximate outline: dom1n1k.name/dump/habr-qa6300.html
I will make a reservation : it does not work in IE6 (it does not know how to set the size of absolutely positioned elements by 4 indents), starting from 7 it should be normal in theory.

Answer 4

I give CSS. Tags, I hope you can arrange yourself. And don't forget to reset the styles.
#wrapper {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header {
height: 110px;
background: #FFE680;
}
#content {
padding: 0 0 70px;
}
#footer {
width: 960px;
margin: -70px auto 0;
height: 70px;
background: #BFF08E;
}