Css 用可变高度固定的位置

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

请看下面我正在做的布局

这件事耽搁了两天，该是继续前进的时候了

最好在firefox中看到fiddle，侧边栏滚动条由于某种原因不能在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>    

...                 


...

---

假设您想要

工具栏列表

容器100%高度-这是您已经拥有的。侧边栏的高度为100%。但是，中的列表仅设置为200px：

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

将其更改为高度：100%使其填充文档的整个高度。现在的问题是如何计算页眉和页脚。然而，这是一个常见的问题，我自己也在这里回答了：就像许多其他人一样。您需要确保页眉和页脚不会被内容区域隐藏或覆盖

---

我认为您可能需要javascript来实现这一点–9edge

一点也不

另外，使用

部分

标签时请注意：

元素的使用不应被视为概述了需要以特定方式进行可视化样式设置的内容。如果是这种情况，作者最好使用语义中立的div

您的

#platformContent

和

#toolBarContainer

样式可能会产生意外的结果

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

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

---

我想你可能需要javascript来完成这项工作。我不确定我是否正确理解了你的问题。在工具栏列表上设置

height:100%

而不是

height:200px

，这样做是行不通的？@HugoGiraudel理想情况下我可以这样做，但它需要窗口高度，如果你一直向下滚动，列表项会溢出到页脚。我只需要到页脚。@9edge我已经使用了一些javascript，但似乎仍然无法获得它。只要简洁且性能优化，我想我可以处理一点javascript，但当然CSS始终是可执行的。这对粘贴CSS标题很有帮助：谢谢，我将更改为divs，但负边距底部并不能解决问题。我的侧边栏是位置：固定的，不应该和主要内容一起滚动。在Chrome中，你们的侧边栏不会和主要内容一起滚动。我知道我在问题中提到了chrome。你刚刚删除了我的页脚，如果你明确指出：左后卫，你会看到问题。我没有删除页脚，我只是没有投入额外的工作，使其显示。在我的回答中，我将你链接到我写的另一个回答：-这给出了一个示例，说明了如何使用页眉和页脚获得100%高度的内容。谢谢，我在这里检查了你的示例。该示例中的变量内容元素有一个位置：relative。如果你放大到可以滚动为止，你会看到元素随着滚动而移动。我的侧边栏不应该移动。