0

Приветствую.

Есть, допустим, такая разметка:

<header>
</header>
<div id="wrap">
    <div id="contentwrapper"></div>
</div>
<footer>
</footer>

Стили:

html, body, #wrap {
    height: 100%;
    margin: 0px;
}
body > #wrap {
    height: auto;
    min-height: 100%;
}
#contentwrapper {
    padding-bottom: 50px;
}
footer {
    position: relative;
    height: 50px;
        width:100%;
    background-color:#42484d;
    min-height:50px;
    padding:25px 0 0;
}

Вроде бы, все работает, но, если открыть, например, firebug, то футер уезжает вверх вместе с ним. Как можно исправить это?

Заранее спасибо.

1

2 ответа 2

1

вроде бы и работает, но не совсем. Футер снизу, но за пределами окна браузера.

Более традиционный вариант такой:

html, body { height: 100%; }
#wrap {
    min-height: 100%;
    box-sizing: border-box; -moz-box-sizing: border-box;
    padding-bottom: 50px;
}
footer {
    height: 50px;
    margin-top: -50px;
}

здесь мы делаем в нижней части контентной области отступ, на место которого разместим футер. Сам же футер располагается после контентной области, имеющей минимальную высоту 100%, и сдвигается вверх на величину собственной высоты. border-box задаётся, чтобы отступ не увеличивал высоту контентной области.

1
  • @Елена Левина, спасибо, но, вроде как, все равно уезжает. jsfiddle.net/qeER7
    – evansive
    2 янв 2014 в 9:16
1

Попробуйте вот такой вариант: Pure sticky footer

HTML:

<body> <header class="header">...</header> <main class="main">...</main> <footer class="footer">...</footer> </body>

CSS:

html{
    position: relative;
    min-height: 100%;
}

body{
    margin-bottom: 150px; 
}

.footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.