Question

我对网络开发非常陌生，我现在正在钻墙。我知道我错过了一些至关重要且非常简单的事情。这是我的代码：

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/

Answer 1

上次我编写html w3schools时，所有这些都是“点击”。

w3schools css reference

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

Answer 2

也许您需要以下CSS：

html, body{
  height: 100%;
}

但是一个jsfiddle会很好。

如果你打开firefox中的检查器，选择正文，然后展开你的div，你可能会注意到身体没有任何高度，即使它看起来应该是这样。这非常烦人，并且在浏览器中不一致。实际上，即使内容不够高，让页脚始终保持在底部是一个奇怪的难题，所有这样做的方法都会根据你需要做的事情引入其他问题（例如：make 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;
}

您可能希望使用左侧和主要宽度的精确值，或左侧的精确值，但主要宽度使用calc（100％ - [左侧宽度]）。或者，display:table变体

Answer 3

您的要求对于您希望最终结果的外观有点模糊。我创建了一个简单的小提琴，我删除了绝对定位并浮动了左列，而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;    
}

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

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

3 个答案: