0

我试图获得一个总是占据整个屏幕的布局，不多也不少。布局有一个标题行、一个 200 像素宽的左栏（可滚动）和一个可滚动的内容区域。

这在 Chrome 和 IE 中有效，但在 Firefox 中，滚动条从不显示也不工作。有什么想法吗？

<!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>

我本来更喜欢使用 CSS，但找不到任何方法来做到这一点。

嗨不应该显示，它只是在那里验证它没有。

4

1 回答 1

2

这是绝对定位的完美用例。

始终使您的 HTML 尽可能简单。

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

CSS 设置绝对定位和溢出：在你的列上自动。

* {
    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;
}

我设置了一个JSFiddle在浏览器中查看它：http: //jsfiddle.net/hpsXg/

于 2012-04-05T22:27:50.353 回答