固定侧边栏固定在页眉和页脚之间答案

【问题标题】：Fixed sidebar anchored between header and footer固定侧边栏固定在页眉和页脚之间
【发布时间】：2023-03-16 01:37:01
【问题描述】：

我有一个边栏是 position:fixed 和 height:100%

但是，效果不是我想要的。高度 100% 是窗口的 100%，因为我需要成为它的容器的 100%，它被限制在页眉和页脚之间。页眉也是固定的，因此主要内容在“下方”滚动，同时页脚固定在主要内容的底部，根据加载的内容量，其高度可以变化。

在这个jsfiddle中我已经将ul#toolBarList的高度设置为200px来演示。如果放大窗口并向下滚动，侧边栏应该占据整个空白高度。我的意思不是简单地在列表后面设置背景，而是侧边栏的底部应该锚定到页脚的顶部。

要了解为什么 100% 不起作用，请将 200px 设置为 100% 并见证列表如何溢出页脚。

答案可以是一些简洁的 javascript，或者最好是与 IE8+、最新的 chrome/firefox 兼容的所有 CSS。

非常感谢

【问题讨论】：

标签： css

【解决方案1】：

您需要将其所有父元素的高度设置为 100%，或者只使用此 CSS 代替高度：

top: 0;
bottom: 0;
right: 0; //whichever side you want it on

【讨论】：

我已经在我的小提琴中尝试过这个，但无法让它工作。可以给我看看吗？
这里是您的示例，稍作修改以再次显示问题。 jsfiddle.net/TGw7j/4 我修复了标题，使其不会滚动，给它一个高度，并在#wrapper 上添加了一个顶部偏移量，该偏移量等于标题的高度。然后我添加了一个具有相对位置和高度的页脚，并将 #main 的边距底部偏移了页脚的高度。现在一切看起来都不错，但问题是当滚动主要内容时，侧栏会随之滚动。将 #side 设置为 position:fixed 可以解决这个问题，但是你又回到了我开始的地方。
侧栏是其容器的 100% 高度。你还问什么？
无论我是否问错了问题，我显然都在试图达到某种效果，即侧边栏固定在页眉和页脚之间。我已经改变了问题，谢谢。侧边栏溢出到 100% 高度的页脚，这就是问题所在。
是的，当它一直滚动到底部但向上滚动时会粘在页脚的顶部。

【解决方案2】：

100% 高度仅在父元素具有明确的高度设置时才有效。您可以通过在 html 元素、body 元素和介于两者之间的任何其他容器元素上设置 100% 高度来实现 100% 高度。例如，

<html style="height: 100%;">
  <body style="height: 100%;">
    <div id="page" style="height: 100%;">
      <div id="sidebar" style="height: 100%; float: left;">content</div>
      <div id="main" style="height: 100%; float: left;">content</div>
    </div>
  </body>
</html>

【讨论】：

感谢您的回复。这是您的建议不起作用jsfiddle.net/Cn29j 此外，我无法将您示例中的#page 或#main 设置为100%，因为#main 具有动态高度，具体取决于加载的内容量
100%不是屏幕高度，而是文档高度，所以不影响动态高度。