1

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

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

坚持了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>

4

1 回答 1

2

假设您想要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%;   
}
于 2013-02-22T09:09:23.010 回答