0

Web ページの 1 つをよりきれいにするのに苦労しています。

このページには、0 から 500 以上の要素を持つことができるリストがいくつかあります。リストはさまざまなレベル / y 座標から始まります。リストの高さを調整して、ブラウザの残りの高さとページのフッターを占めるようにするにはどうすればよいですか? 電子メール フォルダと電子メールがスクロール可能なリストとして並べて表示される電子メール クライアントのようなものです。

リストの上の要素の高さを含む複雑な計算なしでそれを行うことは可能ですか?

質問を明確にするために作成したサンプルページは次のとおりです。 http://jsfiddle.net/dilipvshah/gh2Au/

CSS

.header {
    width: 800px; height: 50px; border: solid 1px black; text-align: center; vertical-align: middle;
}
.footer {
    width: 800px; height: 20px; border: solid 1px black; text-align: center; vertical-align: middle;
}
.subHeader {
    display: table-cell; height: 50px; text-align: center;
}
.content {
    display: table; width: 800px; text-align: center;
}
.contentInner {
    display: table-row; width: 100%; text-align: center;
}
.contentLeft {
    display: table-cell; width: 30%; border: solid 1px black; text-align: center;
}
.contentRight {
    display: table-cell; height: 400px; border: solid 1px black; text-align: center;
}
.tableLayout {
    display: table; width: 100%;
}
.tableRowLayout {
    display: table-row; width: 100%;
}
.listLeft {
    list-style: none; text-align: left; max-height: 500px; overflow-y:auto;
}
.listRight {
    list-style: none; text-align: left; max-height: 500px; overflow-y:auto;
}

HTML

<body>
    <div class="header">
        Header
    </div>

    <div class="content">
        <div class="contentInner">
            <div class="contentLeft">
                Left
                <ul id="leftList" class="listLeft">
                   <li> ... </li>
                   [ ... ]
                </ul>
            </div>

            <div class="tableLayout">
                <div class="tableRowLayout">
                    <div class="subHeader">
                        Sub-header
                    </div>
                </div>
                <div class="tableRowLayout">
                    <div class="contentRight">
                        Right
                        <ul id="rightList" class="listRight">
                            <li> ... </li>
                            [ ... ]
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        Footer
    </div>

</body>

質問を明確にするために画像を追加します。 ここに画像の説明を入力

4

1 に答える 1

0

これの鍵は、 with を使用position:absoluteしtop:0;bottom:0て、リストが残りのウィンドウの高さを正確に満たすようにすることです。

フィドル

ノート：

  • テーブルに関連付けられているマークアップ/CSS を削除しました。(これにより、多くのマークアップと css が削減されます)

  • フィドルの JavaScript はレイアウトとは関係ありません。ダミー リストのコンテンツを作成するだけです。

于 2013-07-08T21:58:40.473 に答える