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 を使用したかったのですが、それを行う方法が見つかりませんでした。

hi は表示されるべきではありません。表示されないことを確認するためのものです。

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 に答える