CSS липкий нижний колонтитул

Question

У меня есть небольшая проблема с моим нижним колонтитулом на новом веб-сайте, который я создаю. Я пробовал технику у Райана Файта (http://ryanfait.com/sticky-footer/), но почему-то это просто не получится. может быть, вы можете мне помочь и сказать, почему?

Ссылка на моей странице aev.martenzander.com

Я только попробовал это на index.php, так что не запутаться при посещении подстраниц.

КОД:

HTML

<!-- FOOTER --> 
<div class="stickyfooter"></div> 
<div class="footer"> 
    <footer> 
     <?php 
     include("includes/footer.php"); ?> 
    </footer> 
</div> 

CSS

.footer{ 
     height: 111px; 
     margin: 0 auto; 
     position: relative; 
    } 

.stickyfooter{ 
     min-height: 100%; 
     height: auto !important; 
     margin: 0 auto -111px; 
    } 

Answer 1

Так как это работает у вас есть класс mainWrapper с заданной отрицательной маржи, то у вас есть кнопочный класс, заставляет маржу оставаться ясной всегда, тогда у вас есть класс нижнего колонтитула, который занимает эту область.

Прямо сейчас у вас нет класса push, а ваш нижний класс определен внутри обертки. Он должен находиться за пределами обертки.

Answer 2

Вот ссылка с простым решением:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML-:

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div> 

CSS-:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
}