0

我正在努力使我的网页之一更漂亮。

该页面有几个列表，可以包含 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

这样做的关键是使用position:absolutewithtop:0;bottom:0来确保列表完全填满剩余的窗口高度。

小提琴

笔记：

  • 我已经删除了与表格相关的标记/css。（这减少了很多标记和CSS）

  • 小提琴中的 javascript 与布局无关 - 它只是创建虚拟列表的内容

于 2013-07-08T21:58:40.473 回答