Question

我找到了一种放置我喜欢的页脚的方法，除了在页面调整大小时页脚与内容重叠的事实。

使用我已经拥有的结构和格式，如何“清除”页脚，以便在页面调整大小时它会掉落（避免重叠#content）？

我已经尝试clear: left，但这对此无效。

基本上，只要空间允许，我希望页脚始终可见，并且连接到窗口的左下方;但是，当窗口变小时，我不希望页脚与我的内容重叠。

CSS：

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    background-size: cover;
    margin: 0;
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: 100%;
    min-width: 900px;
    overflow: hidden;
}
.main_nav {
    margin: 0;
    width: 160px;
    float: left;
    padding-left: 40px;
    overflow: hidden;
}
#content {
    float: left;
    width: 750px;
    height: 600px;
}
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
}

HTML：

<body>
<div id="wrapper">
  <div id="header">
    <h1></h1>
    <ul class="main_nav">
      <li></li>
    </ul>
  </div>
  <div id="content">
  </div>
</div>
<div id="footer">
  <div id="footer_content"></div>
</div>
</body>

Answer 1

这个问题是因为宽度。你的宽度在每种情况下都不同，即内容，页脚和宽度。包装纸也是如此。我创建了一个jsfiddle

[http://jsfiddle.net/jvaibhav/xncuF/37/]

试试这个。

Answer 2

答案已被选中，但我想提供另一种选择。

“包装器”包含“标题”和“内容”，而“页脚”在其外部。例如，您可以添加

z-index:10;

到包装器的css和

z-index:1;

到页脚的CSS。

最后一个并不是真的需要，但这是为了完整性。这样，无论何时进入“触摸”，具有较高z-index的那个将保持在前景上（即，z轴上的更高水平，即垂直于屏幕表面的轴），其他元素将在后面滑动，根据自己的指数。

清除页脚以防止内容重叠

2 个答案: