砌体与我的页脚重叠答案

【问题标题】：Masonry overlaps my footer砌体与我的页脚重叠
【发布时间】：2014-05-29 01:26:14
【问题描述】：

我正在使用 Masonry 创建帖子网格，但正如您在下面的示例中看到的那样，masonry div/boxes 与我的页脚重叠。有什么想法可以让页脚在 masonry 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;
}

【问题讨论】：

标签： jquery css jquery-masonry masonry

【解决方案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 盒子会相应地调整大小并被向下推，因此不会发生重叠。

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢，这让我意识到了一些事情。我认为这样做是因为top:187px 所以如果我添加margin-bottom:187px 它似乎可以解决它。

【解决方案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>

【讨论】：