Making a 100% height interface

With interfaces on the web that resemble those of the desktop (and better), we often want to get rid of the ubiquitous scroll bar in our web applications. We want all the action to happen directly within the visible browser area. Instead of scrolling, we can offer users new ways to interact with the page like Ajax-based page flipping and sliding panels.

The basis of most scroll-less 100% height interfaces contain some CSS looking like this:

html, body {
    /* get rid of default spacing on the edges */
    margin: 0;
    padding: 0;

    /* get rid of that 2px window border in Internet Explorer 6 */
    border: 0;

    /* fill the height of the browser */
    height: 100%;

    /* no more scroll bar */
    overflow: hidden;
}

This resets the margins and padding of the page, gets rid of the chrome border in IE6, sets the height to 100% of the available space, and hides anything that goes outside the 100%. This needs to happen on both the html and body elements. Having a hidden overflow isn't mandatory, but it makes sure that nothing will cause that scroll bar to pop back up, even if you are dragging things off the edge of the screen.

Now, anything you put directly into the body can also be given height: 100% and it will do exactly what you expect (fill the page). This way, you can have the interface of the page grow and shrink along with the size of the browser. You can even have multiple layers fill the page like this:

/* css */
div.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

<!-- html -->
<body>
    <div class="layer">
        .. some stuff ..
    </div>

    <div class="layer">
        .. some other stuff ..
    </div>
</body>

You can easily give an element within the page a scroll bar by throwing in overflow: auto on something that has height: 100% and some padding or margins.

We can also use JavaScript to calculate the size of the browser and use this to decide how much content we display at a time. We can do this with some relatively easy code, now that our body is the exact width and height of the browser "viewport":

function getPageSize() {
    return [
        document.body.offsetWidth,
        document.body.offsetHeight
    ];
}

Note that this code only really works with 100% height. On a page with a variable height, it's not reliable at all.

I've put this stuff to use with a lot of projects lately, most notably PictureSandbox (formerly FlickrCash).

For more details on calculating the width of the viewport, check out Viewport Properties at QuirksMode.

Making a 100% height interface

About the author