Question

I am developing a web app that is supposed to have the feeling of a desktop app. I want my layout to make use of the entire browser window height (no more, no less). I’ve made an image that show the intended structure of the page.

Intended layout

In other words, I don’t want the user to be able to scroll the entire page, but rather the different sections of the page. Similar to how most desktop applications work.

I’ve read everything about how to create columns with equal height etc., but non of the solutions I’ve found adds scrolling to the different sections instead of the entire page, and still makes use of the entire window height.

I hope someone has a solution to this, it would be awesome. I’ve been googling for hours.

Answer 1

This should get you 90% of the way there:

http://jsfiddle.net/aEdc7/

However, have you considered using a JavaScript framework such as Ext JS? Take a look at some of the demos: http://dev.sencha.com/deploy/ext-4.0.1/examples/

html, body {
    margin: 0;
    padding: 0
}

#container > div {
    position: absolute
}
#header {
    top: 0;
    width: 100%;
    background: cyan;
    height: 40px
}
#nav {
    top: 40px;
    bottom: 0;
    left: 0;
    width: 150px;
    background: #ccc;
    overflow-y: auto
}
#content {
    top: 60px;
    bottom: 0;
    left: 150px;
    right: 0;
    background: #eee;
    overflow-y: auto
}
#error {
    top: 40px;
    left: 150px;
    right: 0;
    height: 20px;
    background: #444
}

<div id="container">
    <div id="header"></div>
    <div id="nav"><br /></div>
    <div id="error"></div>
    <div id="content"></div>
</div>