Question

我正在寻找一种方法来确保可滚动的固定元素的高度适应所有空白，直到页脚。

请参阅以下fiddle，这是我正在处理的布局。

已经坚持了2天，现在是时候继续前进了。

最好看看firefox中的小提琴，侧边栏滚动条由于某种原因没有在chrome中滚动，但这是一个不同的问题。

<header></header>
<div id="platformContainer">

    <section id="platformContent">
        <div id="platformBody">        
             <ul class="mainList">
                 ...                 
            </ul>
        </div>
    </section>

  <section id="toolBarContainer">
    <div id="toolBarContent">
        <ul id="toolBarList">
            ...
        </ul>
    </div>
</section>

<footer></footer>

Answer 1

假设您想要toolBarList容器100％高度 - 这就是您已经拥有的。侧边栏 100％高度。但是，其中的列表仅设置为200px：

#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
    height: 200px;
    ...
}

将其更改为height:100%;会使其填充文档的整个高度。现在的问题是页眉和页脚的问题。然而，这是一个常见问题，我自己在这里回答：https://stackoverflow.com/a/14892331/1317805和其他许多人一样。您需要确保页眉和页脚不被内容区域隐藏或覆盖。

我想你可能需要javascript才能做到这一点 - 9edge

完全没有！

此外，请注意使用section代码时：

不应将元素的使用视为概述需要以特定方式直观地设计样式的内容。如果是这种情况，最好建议作者使用语义中性的div。

您的#platformContent和#toolBarContainer样式可能会产生意外结果。

http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements

事实上，您对这些部分的样式可以完全替换为：

#platformBody, #toolBarContent {
    position:relative;
    height:100%;
    top: 70px;
    width: 100%;   
}

位置固定，高度可变

1 个答案: