1

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

使用我已经拥有的结构和格式，如何“清除”页脚，以便在页面调整大小时它会下降（避免重叠#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>
4

2 回答 2

0

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

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

尝试这个。

于 2013-05-06T06:02:15.643 回答
0

答案已经选择了，但我想给出一个替代方案。

“包装器”包含“页眉”和“内容”，而“页脚”在它之外。例如，您可以添加

z-index:10;

到包装器的 css 和

z-index:1;

到页脚的CSS。

最后一个并不是真正需要的，但它是为了完整性。这样，每当他们“接触”时，具有较高 z-index 的元素将保持在前景（即 z 轴上较高的水平，即垂直于屏幕表面的轴），而其他元素将滑到后面，根据自己的索引。

于 2013-05-06T07:01:20.807 回答