DIV（pos:absolute）在jquery.slideToggle上重叠

我对网络开发非常陌生，我现在正把头钻进墙里。我知道我遗漏了一些关键的、可能非常简单的东西。这是我的密码：

HTML:

当我切换sideColumn div以显示时，页脚停留在页面底部的位置，这可能是由于

#footer {
    position:absolute;
        bottom:1px;

侧栏按其应有的方式向下放置，而与页脚重叠（按其不应有的方式放置）。我一直在摆弄这些元素的位置，但毫无用处。有什么建议或者指点一下我可以在哪里阅读现有的解决方案吗？提前谢谢

小提琴：

---

上次我编写html代码时，所有这些都单击了

---

我不知道你在画什么，所以我将留给你来修补…我将尝试不同的属性值，看看会发生什么。

也许你需要以下CSS：

html, body{
  height: 100%;
}

但是一个JSFIDLE就好了

如果在firefox中打开inspector，选择body，然后展开div，您可能会注意到body并没有变得更高，尽管看起来应该如此。这很烦人，而且在不同浏览器之间不一致。实际上，让页脚始终保持在底部，即使内容不够高，也是一个奇怪的难题，所有让页脚保持在底部的方法都会带来其他问题，具体取决于您需要做什么，例如：让javascript将页面滚动到某个位置

编辑：

这种页面结构应该适合您的需要：

HTML:

---

您可能希望使用left和main宽度的精确值，或者使用left but calc100%-[left's width]的精确值作为main宽度。或者，变体

对于最终结果的外观，您的需求有点模糊。 我创建了一个简单的提琴，在这里我删除了绝对定位并浮动了左列，而滑动切换不会导致左列与页脚重叠

我添加了间距和颜色，以查看div上的边界外观

#footer {
    background-color: red; /* for illustrative purposes */
    height: 200px; /* for illustrative purposes */
    width: 100%;
    margin: auto;
}

#leftColumn {
    width:200px; 
    background-color: yellow; /* for illustrative purposes */
    height: 200px; /* for illustrative purposes */
    float:left;    
}

---

页脚重叠是唯一的问题吗？

请提供小提琴页脚重叠是我唯一的问题已添加到CSS中。不走运。我不需要页脚来扩展页面，这就是为什么它给了我一段艰难的时光。我需要用leftcolumn扩展它，也许可以尝试一种结构，在这种结构中，左列和主体是并排的div，而页脚只是下一个div，但有明确的含义：两者都有；在它的css。这将很好地工作，除非页面不是很高，页脚不会粘在浏览器底部，这不是一个大问题。由于某些原因，无法在此处的注释中生成代码块，因此我将编辑我的答案，但这是一种相当常见的方法。Jacob，感谢您的回复。我最初的结构与你描述的一模一样。但是，我需要能够指定属性z-index，以便其他元素上的边界阴影正确放置。自从更改到我当前的结构，阴影完全消失了，但是页面表现得很糟糕。尝试过的浮动：在页脚上留下，现在一切工作都完美无缺了。我应该早点试试。谢谢你的意见！

html, body{
  height: 100%;
}

<div id="left">
  <div id="nav">
  </div>
</div>
<div id="main">
</div>
<div id="footer">
</div>

#left{
  min-height: 50px;
  float: left;
  width: 20%;
}
#main{
  min-height: 50px;
  float: left;
  width: 80%
}
#footer{
    clear: both;
}

#footer {
    background-color: red; /* for illustrative purposes */
    height: 200px; /* for illustrative purposes */
    width: 100%;
    margin: auto;
}

#leftColumn {
    width:200px; 
    background-color: yellow; /* for illustrative purposes */
    height: 200px; /* for illustrative purposes */
    float:left;    
}