位置固定，高度可变

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%;   
}