Question

我使用Masonry创建帖子网格，但正如您在下面的示例中所看到的，砌体div / box与我的页脚重叠。在砌体div之后，有什么想法让页脚开始？

用于封装砌体的页脚和容器的CSS：

footer {
width:100%;
background:#CCC;
height:400px;
}
#container {
max-width:1260px;
width:calc(100% - 40px);
min-height:1500px;
margin:auto;
top:187px;
position:relative;
}

Answer 1

http://jsfiddle.net/CkhUQ/8/

正确的解决方案和原因是因为您设置了

#container {
    max-width:1260px;
    width:calc(100% - 40px);
    min-height:1500px;
    margin:auto;
    top:187px;
    position:relative;
}

顶部：187px;部分原因是这一点因为当你把内容推下来时它的药水没有改变。尝试使用padding-top替换然后包含div 框会相应地调整大小并向下推，因此不会发生重叠。

Answer 2

将padding-bottom: 300px;添加到您的#container元素。你可以玩这个数字，但它应该可以解决问题。

Answer 3

如何使用容器div上的标题div和显示块，然后清除两个div： http://jsfiddle.net/shJNj/1/

#container {
    max-width:1260px;
    width:calc(100% - 40px);
    min-height:1500px;
    margin:auto;
    display: block;
}

<div id="header" style="height: 187px;"></div>
<div id="container">

<div style="clear: both;"></div>
<footer></footer>

砌体与我的页脚重叠

3 个答案: