нижний колонтитул не остается внизу

Question

i desgined интернет-магазин с oscommerce. вы можете увидеть here

Нижний колонтитул придерживаться дна, но не фиксирован. Css

#footer_wrapper { 
    /* position: absolute; */ 
    bottom: 0; 
    clear: both; 
    width: 100%; 
    height: 400px; 
    background-color: #0d0d0d; 
    margin: 0; 
} 

Но, когда я меняю положение на «абсолютный», нижний колонтитул подпрыгивает над содержимым.

См. Пример для product-list.

Неправильно?

Answer 1

добавить позицию в #bodyWrapperposition: relative; & padding-bottom в футере height

#bodyWrapper{ 
    padding-bottom: 400px; 
    position: relative; 
} 

заменить этот CSS

#body { 
box-sizing: border-box; 
display: table; 
height: 100%; 
margin: 10px auto; 
min-height: 700px; 
position: relative; 
width: 900px; 
} 

Answer 2

Для того, чтобы position: absolute; работать, родительский элемент #footer_wrapper должен иметь position: relative;

Answer 3

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
.page-wrap { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -142px; 
 
} 
 
.page-wrap:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .page-wrap:after { 
 
    height: 142px; 
 
} 
 
.site-footer { 
 
    background: orange; 
 
}

<div class="page-wrap"> 
 
    
 
    Content! 
 
     
 
</div> 
 

 
<footer class="site-footer"> 
 
    I'm the Sticky Footer. 
 
</footer>

Это работает для меня. при установке высоты 100% на тело, вы должны установить все родительские div с высотой 100%.