Кирпичная кладка перекрывает мой нижний колонтитул

Я использую Masonry для создания сетки сообщений, но, как вы можете видеть в моем примере ниже, div/boxes masonry перекрывает мой нижний колонтитул. Любые идеи, чтобы нижний колонтитул начинался после каменной кладки?

Пример: http://jsfiddle.net/CkhUQ/

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 masonry jquery-masonry
person user3273481    schedule 29.05.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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 будет иметь соответствующий размер и будет сдвинуто вниз, поэтому перекрытия не произойдет.

person vico    schedule 29.05.2014

arrow_upward
0
arrow_downward

Добавьте padding-bottom: 300px; к элементу #container. Вы можете поиграть с числом, но оно должно сработать.

person dcclassics    schedule 29.05.2014
comment
Спасибо, это заставило меня кое-что понять. Я думаю, что это происходит из-за top:187px, поэтому, если я добавлю margin-bottom:187px, это, кажется, исправит это. - person user3273481; 29.05.2014

arrow_upward
0
arrow_downward

Как насчет с блоком заголовка и блоком отображения в контейнере 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>
person wilsotc    schedule 29.05.2014