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

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

这将用于保存页面导航，而我的导航元素将用于保存站点导航。我正在试着看看这是否涉及到另一种语言(我只知道HTML/CSS)，并试着把这个侧边栏div直接放在左边的中间。我不太知道该怎么做。我相信页脚和页眉就是人们所说的“粘性”。它们的位置:同样是固定的。

Answer 1

我同意阿不都拉的观点。我们需要查看您的所有代码，但根据您提供的内容，我认为您可能需要在样式表或页面标题中设置以下css：

html, body{
   height:100%;
}

我找到了这篇文章，它可能会帮助你http://www.mattboldt.com/css-100-percent-height/

但在不了解更多的情况下，这是我所能提供的。

Answer 2

你的问题不清楚。据我所知，答案如下。

删除这些

#header {
   position: fixed;
}
#pgdirectory {
   position: absolute;
}
#footer {
   position: fixed;
 }

添加这些

.clear
   {
      clear: both
   }
.body
   {
     float: left;
   }

在您的HTML中

<div id="header">
    <nav>
        <ul>
            <li><a href="LINK">Home</a></li>
            <li><a href="LINK1">Web Development</a></li>
            <li><a href="LINK2">Fursuits and Mascots</a></li>
            <li><a href="LINK3">Art Customs</a></li>
            <li><a href="LINK4">Computer Building</a></li>
            <li><a href="LINK5">Future Plans</a></li>
        </ul>
    </nav>
</div>
<div class="clear"> </div> //New
<div class="body"> //New
    <div id="pgdirectory">
        <div id="links"> TEXT TEXT TEXT</div>
    </div>
    <div id="content">
        <h1>SITE UNDER CONSTRUCTION</h1>
        <p></p>
        <h2>Contact Info</h2>
        <br>
        Email: smith@kempt.us<br>
        Skype: mcKempt<br>
    </div>
</div> //closing of Body Div
<div class="clear"> </div> //New
<div id="footer">