html - 适合页面高度但不与页脚/页眉重叠的可缩放侧边栏

Question

所以我设法在一个 div 中制作了一个完全适合左侧的侧边栏，但不幸的是，它在我的页脚和页眉下方足够多，以至于我试图在该侧边栏 div 中放置第二个 div，它将用于保持实际内容。

我正在尝试使边栏适合可缩放(每当我将浏览器的高度调整为任何高度时都会更改)但不与页眉或页脚重叠或位于其下方。我将定位设置为绝对定位，并将页眉/页脚设置为固定。

 HTML:
 <div id=sidebar"></div>

 CSS:

   #sidebar {
    background-color: #1c1c1c;
    left: 0;
    width: 300px;
    height: 100%;
    border-right: #212121 5px solid;
    border-top: #212121 5px solid;
    border-bottom: #212121 5px solid;
    position: absolute;
    z-index: 1;
    }

这将用于保存页面导航，而我的 nav 元素用于保存站点导航。我想看看这是否涉及另一种语言(我只真正了解 HTML/CSS)，并且还试图将这个侧边栏 div 直接放在左侧的中央。不太清楚该怎么做。我相信页脚和页眉就是所谓的“粘性”。它们是 position: fixed，又一次。

Answer 1

我同意阿卜杜拉的观点。我们需要查看您的所有代码，但根据您提供的内容，我认为您可能需要在样式表或页眉中设置以下 CSS:

html, body{
   height:100%;
}

我发现这篇文章可能对您有帮助http://www.mattboldt.com/css-100-percent-height/

但在不知道更多的情况下，这就是我所能提供的。