Как закрепить футер внизу страницы

Рейтинг: 0Ответов: 3Опубликовано: 17.02.2015

Есть такая верстка:

<div id="wrapper">
    <div id="header">
    Здесь header
    </div>

    <div id="content">
    здесь content
    </div>

    <div id="fotter">
    здесь fotter
    </div>

</div>

Допустим, у меня мало контента. И футер поднят вверх. Если я прописываю в css свойство

#content{
height:100%;
}

то если будет много контента, div контента не будет увеличиваться, а будет всегда height 100%.

Как выйти из такой ситуации, чтобы футер всегда был внизу вне зависимости от количества контента?

css html
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Я не гуру в CSS, но попробую предположить, что можно прописать

#content{
    min-height:100%;
}

Если же нужен "прибитый" к нижней части экрана, то можно футеру задать position:absolute;

#footer{
    position: absolute;
    bottom: 0;
    left: 0;
}
▲ 2

Если я правильно понял, то тебе нужен именно фиксированный подвал? Делается это достаточно просто:

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
}
▲ 1

html:

<section>
  <article>CONTENT</article>
</section>
<footer>FOOTER</footer>

css:

*{
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;        
    text-align: center;
  }
section {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background: #999;
  }
article {
    padding-bottom: 100px;
 }
footer {
    height: 100px;
    margin-top: -100px;
    background: #f00;
}

http://jsfiddle.net/4hv9y71o/

http://jsfiddle.net/w0y2mnj6/ - display: flex;