DIV（pos：absolute）在jquery .slideToggle上重叠答案

【问题标题】：DIV (pos:absolute) getting overlapped on jquery .slideToggleDIV（pos：absolute）在jquery .slideToggle上重叠
【发布时间】：2014-08-13 17:54:49
【问题描述】：

我对 Web 开发非常陌生，现在我正陷入困境。我知道我遗漏了一些重要且可能非常简单的东西。这是我的代码：

HTML：

<html>
<head></head>

<body>
    <div id='content'>

        <div id='leftColumn'>php includes</div>
            <script></script>  //jQuery script to slideToggle a div on the leftColumn.
        <div id='page'>php includes</div>

    </div>
    <div id='footer'>php includes</div>
</body>

</html>

CSS：

#leftColumn {
        position:absolute;
        left:0;
        top:70px;
        width:200px;
}
    #leftColumn1 {
        position:relative;
        z-index:1;
    }
    #leftColumn2 {
        position:relative;
        z-index:1;
    }
#content {
        z-index:-1;
        width: 100%;
        padding-top:0px;
}
#footer {
    position:absolute;
        bottom:1px;
    width: 100%;
    margin: auto;
}

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

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

#sideColumn 下降（应该如此）并与#footer 重叠（不应如此）。我一直在弄乱这些元素的位置，但无济于事。有什么建议或者指点我可以阅读现有解决方案的地方吗？提前致谢。

小提琴： http://jsfiddle.net/ETHER34L/ymsuv0m6/3/

【问题讨论】：

请提供小提琴

标签： jquery html css positioning overlapping

【解决方案1】：

上次我编写 html w3schools 时让这一切都“点击”了。

w3schools css reference

我不知道你在想象什么，所以我会留给你修修补补......我会尝试不同的属性值，看看会发生什么。

【讨论】：

在页脚尝试了float:left，现在一切正常。早该尝试的。感谢您的意见！

【解决方案2】：

对于您希望最终结果的外观，您的要求有点模糊。我创建了一个简单的小提琴，在其中删除了绝对定位并浮动左列，并且 slideToggle 不会导致左列与页脚重叠。

Fiddle Demo

我添加了间距和颜色以查看边界在 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;    
}

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

【讨论】：

页脚重叠是我唯一的问题

【解决方案3】：

也许您需要以下 CSS：

html, body{
  height: 100%;
}

但是一个 jsfiddle 会很好。

如果您在 Firefox 中打开检查器，选择主体，然后展开 div，您可能会注意到主体并没有变得更高，即使它看起来应该更高。这很烦人，并且跨浏览器不一致。实际上，即使内容不够高，让页脚始终保持在底部是一个非常困难的问题，并且所有让它这样做的方法都会引入其他问题，具体取决于您需要做什么（例如： javascript 将页面滚动到某个位置）。

编辑：

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

HTML：

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

CSS：

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

您可能希望对 left 和 main 的宽度使用精确值，或者对 left 使用精确值但 calc(100% - [left's width]) 作为 main 的宽度。或者，display:table 变体

【讨论】：

刚刚添加到我的 CSS 中。没运气。我不需要页脚随页面展开，这就是为什么它给我带来了困难。我需要它用 leftColumn 扩展
也许可以尝试一个结构，其中左列和主体是并排的 div，而页脚只是下一个 div，但有明确的：两者；在它的CSS中。这会很好地工作，除非页面不是很高，页脚不会粘在浏览器的底部，这不是一个大问题。由于某种原因，无法在此处的 cmets 中制作代码块，因此我将编辑我的答案，但这是一种相当常见的方法。
雅各布，感谢您的回复。我最初有你描述的确切结构。但是，我需要能够分配属性z-index，以便其他元素上的边框阴影正确下降。自从更改为我当前的结构后，阴影完美下降，但页面表现不佳。