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直接放在左侧的中心。不太清楚如何去做。我相信页脚和标题是人们所谓的“粘性”。他们的位置：固定，再次。

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">

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

2 个答案: