2015-05-07 5 views
0

Итак, каждый раз, когда я создаю сайт, у меня возникают проблемы с нижним колонтитулом. Теперь, после того, как некоторое Googling, я обнаружил следующее:Липкий нижний колонтитул внизу экрана, а не внизу pafe

http://getbootstrap.com/examples/sticky-footer/

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

Это где футер палочки:

Footer

То есть, когда я полностью перейти к верхней части страницы, в нижней части экрана Google Chrome на моем Mac.

Это HTML я использую:

<body> 
    <div id="wrapper"> 
    <!-- A lot of content --> 
    </div> 
    <footer> 

    </footer> 
</body> 

И CSS:

html { 
    box-sizing: border-box; 
    height: 100%; 
} 

body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    overflow-x: hidden; 
    background: url(../img/bg.png); 
} 

#wrapper { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto -60px; 
    padding: 0,0,60px; 
} 

footer { 
    background-color: #292929; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
} 

Так как это, что это сноска путает нижнюю часть моего экрана с нижней части страницы?

Спасибо.

ответ

0

Проблема здесь ваш body и html имеет высоту 100% При назначении высоты для тела и HTML элементов на 100%, они не будут выходить за пределы высоты окна, независимо от их содержания.

Вы должны удалить эти свойства и вместо того, чтобы добавить min-height: 100% к html

Вы должны проверить образец страницы вы просто связаны, чтобы увидеть свойства html и body.

Смежные вопросы