Achieving A Simple Row Layout With Css Using 100% Height

Sorry to have to ask this since there are many CSS 100% height questions here (which I've read). I'm to achieve a simple layout using DIVs instead of a TABLE. The first 3 rows are

Solution 1:

Divs stack up automatically so all you have to do is hand them a height and you should be all set. Try this:

HTML

<divclass="container"><divclass="twenty">
        fixed height 20
    </div><divclass="fifty">
        fixed height 50
    </div><divclass="hundred">
        fixed height 100
    </div><divclass="auto"><divclass="content">
            ....
        </div></div><divclass="fifty"style="border-bottom:none; border-top:1px solid">
        fixed height 50
    </div></div>

CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.container {
    width:100%;
    height:100%;
}

.twenty, .fifty, .hundred, .auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin:-120px0;
    padding:120px0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

---

EDIT Updated answer for future reference. Now the container completely fills the width and height of the document and just scrolls the scrollable portion of the page while keeping the sections that OP wanted available.

Full view: http://jsfiddle.net/8abeU/show/ Fiddle: http://jsfiddle.net/8abeU

Solution 2:

You need to set the parent's position attribute to absolute and set the auto div's height to 100%. You can see it here. Also remember to include a doctype declaration at the top of your HTML, that'll help make it render more consistently across browsers.

Note:

This won't cause the container to fill the entire window vertically but if you don't have to put a border on it, it will look as if it does.

Solution 3:

The quick answer is replace your table and tr elements with DIVs. Then set the first three rows with a css class="fixed-height-(whatever size)" Let the forth div expand as needed and the last row have a css class="fixed-height-(whatever size). You can use the same class where the heights are the same, assuming all the other styling is the same.