0

これはCSSだけで可能ですか？

画面を 2 つのスペースに分割しようとしています。

  1. 画面と常に同じ高さの左側の div は、その幅をコンテンツに合わせて拡大し、スクロール バーで高さのオーバーフローを処理します。

  2. 画面の残りの幅を占有し、そのコンテンツをラップし、高さがコンテンツに関係なく画面の高さ以上である div。

最善を尽くして試したサンプルコードを次に示します（fiddle）：

HTML:

<body>
    <div id="items">
        <table>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
            <tr>
                <td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
            </tr>
        </table>
    </div>
    <div id="container">This should expand rest of page width.</div>
</body>

CSS:

body {
    margin: 0;
    padding: 0;
    position: absolute;
    height: 100%;
}
#items {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
    float: left;
}
#container {
    min-height: 100%;
    border: solid 1px blue;
    float: left;
}

これは非常に近いですが、2 番目の div (青い境界線) が残りの画面幅全体を拡大できないため、失敗します。最初の div の内容に基づいて幅を拡張する必要があるため、% 幅を設定したり、固定幅を指定したりしたくありません。

4

1 に答える 1

1

これを行う：

html, body {
    width: 100%;
    height: 100%;
}

#left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

#right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll; // or not if you don't want it to
}
于 2013-03-18T19:04:32.793 に答える