Home/ Questions/Q 7761915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T14:15:27+00:00

I am trying to get a layout that always takes up the entire screen,

  • 0

I am trying to get a layout that always takes up the entire screen, no more, no less. The layout has a header row, a 200px wide left bar (scrollable), and a scrollable content area.

This works in Chrome and IE, but in Firefox the scroll bars never show nor work. Any thoughts?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
    <style type="text/css">
* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background-color: yellow;
    overflow: hidden;
}

#viewTable {
    width: 100%;
    height: 100%;
    background-color: red;
}

#header {
    height: 72px;
    background-color: blue;
}

#leftcol {
    vertical-align: top;
    width: 200px;
    height: 100%;
    background-color: green;
}

#menu {
    height: 100%;
    overflow: auto;
}

#rightcol {
    vertical-align: top;
    width: auto;
    height: 100%;
    background-color: purple;
}

#content {
    height: 100%;
    overflow: auto;
}
    </style>
</head>
<body>
</body>
<table id="viewTable" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2" id="header">
            Header
        </td>
    </tr>
    <tr>
        <td id="leftcol">
            <div id="menu">
                0<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                100<br/>
            </div>
        </td>
        <td id="rightcol">
            <div id="content">
                0<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                100<br/>
            </div>
        </td>
    </tr>
</table>
hi
</html>

I would have preferred to use CSS, but could not find any way to do it.

The hi should no show, it is simply there to verify it does not.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a perfect use case for absolute positioning.

    Always keep your HTML as simple as possible.

    <html>
    <body>
        <div id="header">
            Header
        </div>
        <div id="leftcol">
            Leftcol
        </div>
        <div id="rightcol">
            main area
        </div>
    </body>
</html>

    CSS to set absolute positioning and overflow: auto on your columns.

    * {
    margin: 0;
    padding: 0;
}

html, body {
    background-color: yellow;
    overflow: hidden;
}
#header{
    position: absolute;
    top: 0px;
    left:0px;
    right: 0px;
    height: 72px;
    background-color: blue;
}
#leftcol {
    position: absolute;
    left: 0px;
    top: 72px;
    bottom: 0px;
    width: 200px;
    overflow: auto;
    background-color: green;
}
#rightcol {
    position: absolute;
    top: 72px;
    left: 200px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    background-color: purple;
}

    I set up a JSFiddle to view it in the browser: http://jsfiddle.net/hpsXg/

    • 0