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

【问题标题】：Scaleable sidebar that fits page height but not overlapping footer/header适合页面高度但不重叠页脚/页眉的可缩放侧边栏
【发布时间】：2015-04-24 04:35:53
【问题描述】：

所以我设法在一个 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，再次。

【问题讨论】：

给我们你的代码输出（附加链接或图片）
是的；没有笑声。 kempt.us
你的侧边栏是什么？无法得到您的问题？？告诉我你需要什么？？
如果您在 style.css 中查找，我的侧边栏将标记为 #pgdirectory。或者，如果您正在寻找它是最左边的深灰色条。我试图让它适合页面的整个高度，但不与页脚/页眉重叠/重叠。所以我试图通过百分比而不是像素来工作，所以它会根据浏览器的大小进行缩放。
或者你说你看不到它是因为页面没有加载？

标签： html css

【解决方案1】：

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

html, body{
   height:100%;
}

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

但在不知不觉中，这就是我所能提供的。

【讨论】：

【解决方案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">

【讨论】：