Question

我正在尝试获得一个总是占用整个屏幕的布局，不多也不少。布局有一个标题行，一个200px宽的左栏（可滚动）和一个可滚动的内容区域。

这适用于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，但找不到任何方法。

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

Answer 1

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

始终保持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/

表格溢出工作在Chrome和IE浏览器，但不是Firefox

1 个答案: