The Future of the Web » Making a 100% height interface » HTML, CSS, JavaScript and Ajax Expert Web Developer for Hire

Making a 100% height interface
Jun 2 2007
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;
}


<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.
Tags: css
View 15 Comments | Add a comment
Comments

1. Arvind at 6:39pm on June 13, 2007

This scroll-less, contained, liquid, 100%, layout is a much needed application of web interface standards and deserves and detailed and in-depth study. Thanks for a great summary for starters.

I began by applying your suggestions toward my needs, but I for one am stuck when it comes to certain browser issues and the rest of the web community seems to be in no better position.

In fact, my application works great in IE (except for some flashing scrollbars), but not at all in FF. Isn't the world topsy-turvey!??

Here is a link to the page in question:
http://www.breakdancingganesha.com/sources/layout/
Any help would be greatly appreciated!

Cheers and keep up the good work!
Arvind.
2. Arvind at 6:43pm on June 13, 2007

* follow-up disclaimer *

You'll notice I've used <table>s... gasp!... to contain my header, left, main, and footer panels.

I hope this won't draw too much attention, I guess I'm old fashioned in certain ways and find it simpler to use html tables to delineate these standard application areas instead of messing with floated and positioned <div>s.

Cheers,
A.
3. Jesse Skinner at 7:13pm on June 13, 2007

Sorry, Arvind, but I'm gonna have to use tables as a scapegoat here and say I'm not quite sure how to fix your layout.. I'm just not that familiar with the quirks of table layouts..
4. Steve Main at 2:30am on August 6, 2007

man i must have hit your page 30 time in the last month while trying to design my 100% width 100% height web interface with scrolling content area (Static C frame with dynamic Scrolling Porthole or SCFDSP for short) . All i wanted was a simple C frame that was static no mater how you resized the page with a scrolling content area inside the C frame. If all you want is a static height header, static width side menu, static height footer, with a scrolling dynamic content area please copy the code below and same yourself soem time. It took me almost 1 month to figure this out and now i want to share with the resorces that helped me to get there

code is as follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C Frame Porthole</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%; overflow: hidden;}
#header-div {position: absolute; top: 0px; height: 40px; left:0px; right: 0px; border: 1px solid #000;}
#body-div {position: absolute; top: 40px; bottom: 30px; left: 0; right: 0;}
#body-menu-div {position: absolute; top: 0px; bottom: 0px; left: 0; width: 200px; border: 1px solid #000;}
#body-content-div {position: absolute; top: 0px; bottom: 0px; right: 0; left: 201px; border: 1px solid #000; overflow: auto;}
#footer-div {position: absolute; bottom: 0px; height: 29px; left:0px; right: 0px; border: 1px solid #000;}
</style>
</head>

<body>
<div id="header-div">This is the header container</div>
<div id="body-div">
<div id="body-menu-div">This is the navagation container</div>
<div id="body-content-div">
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
</div>
</div>
<div id="footer-div">This is the footer container</div>
</body>
</html>
5. Steve Main at 4:11am on August 6, 2007

Sorry forgot to add my working example please visit http://examples.caspan.com to see a working example of this use your different browsers and see how it works.
6. Barney at 5:09pm on August 16, 2007

Hmm Steves example falls down if you set an element to width:100% in body-content-div. this pushes the div out to the right and as overflow set to hidden you cannot view content.
7. Greg Helbers at 5:32am on August 22, 2007

Good work, Steve.
One of your ideas has helped me to resolve a problematic layout, so thanks for your efforts, and "thanks for sharing"!!!
Greg
8. Josh at 7:17am on August 24, 2007

Great work... But it doesn't work on IE6.
9. Gouri at 10:22am on August 30, 2007

Steve Main, i was jumped by ur solution just b4 having look it in IE6! but then need to search another solution, why you didnt check it in IE6
10. Nick Hodge at 2:48pm on October 23, 2007

After about 10hrs, i got it to work in IE6, IE7 and FF2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C frame Porthole</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {margin: 0; padding: 0; overflow: hidden;}
html, body {width: 100%; height: 100%;}
#header-div {position: absolute;width:100%; top: 0px; height: 40px; left:0px; right: 0px; border: 0px solid #000;}
#body-div {position: absolute; top: 41px;width:100%;bottom:21px; height: expression(document.compatMode=='CSS1Compat'? document.documentElement.clientHeight -61 +'px' : body.clientHeight -61 +'px');border: 0px solid #FF0000;}
#body-content-div {position: absolute; top: 0px; bottom:0px;height: expression(document.compatMode=='CSS1Compat'? document.documentElement.clientHeight -61 +'px' : body.clientHeight -61 +'px');width: 100%;border: 1px solid #FF0000; overflow: auto;}
#footer-div {position: absolute;width:100%; bottom: 0px; height: 20px; left:0px; border: 0px solid #000;}
</style>
</head>

<body>
<div id="header-div">This is the header container</div>
<div id="body-div">
<div id="body-content-div">
TOP<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>BOTTOM
</div></div>
<div id="footer-div">This is the footer</div>
</body>
</html>
11. Sal at 12:45am on February 3, 2008

Great work! I love the ie fix; thanks for all your effort! But what happend to the menu/navigation area?
12. James Holk at 10:12pm on February 11, 2008

I have a seemingly subtle problem with my site, however it has already bothered multiple people in the two days it's been up.

I have a 100% height set to my page and a wrap set to my content area. This way I still get a scrolling website, but also have the 100% height feature that I'm after. The problem is with where the cursor is positioned on the page when visitors use their mouses scroll ball. If you're not in the content area or outside the web page dimensions then the page won't scroll. Look at the site for yourself to get a clearer example of what I'm saying.

Is there anyway to add a 'scroll anywhere' type command to fix this problem?

Thanks.
13. Christiaan at 8:36am on March 2, 2008

Hey, thank you! This was incredibly helpful!
14. ben at 4:07am on March 28, 2008

GREAT Post. I have been searching for an answer to the IE6 problem. Thank You :):)
15. Naif Amoodi at 10:54am on May 14, 2008

My requirements are pretty complicated but I am going to give this method a try!

Add a Comment

Your Name Email (optional, used for Gravatar) Website (optional) Comment
Note: HTML tags and entities will be converted so that they are displayed as you type them. This means if you type in <em>, people will see <em>, and if you type <em>, people will see <em>.
What is six plus four? I want to be emailed when others add comments to this page.