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, то футер уезжает вверх вместе с ним. Как можно исправить это?

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

evansive
  • 581

2 Answers2

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 задаётся, чтобы отступ не увеличивал высоту контентной области.

Елена Левина
  • 2,210
  • @Елена Левина, спасибо, но, вроде как, все равно уезжает.

    http://jsfiddle.net/qeER7/

     – evansive Jan 02 '14 at 09: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;
}