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

Question

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

<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%.

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

score 4 · Accepted Answer · edited May 17 '20 at 18:23

4

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

#content{
    min-height:100%;
}

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

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

edited May 17 '20 at 18:23

Grundy

81,538

answered Feb 17 '15 at 11:21

dlarchikov

4,403

1

Да и не забыть контенту дать нижний паддинг на высоту футера – ferrari Feb 17 '15 at 13:35

score 2 · Answer 2 · edited Feb 17 '15 at 13:44

2

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

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

edited Feb 17 '15 at 13:44

Виталина

11

answered Feb 17 '15 at 13:44

Pavel Popov

116

soledar10 · Answer 3 · 2015-02-17T14:46:53.407

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;

score 1 · Answer 4 · answered Jan 31 '16 at 11:25

Как я понимаю необходим прижатый к низу футер? Вот пример такой разметки:

html{
 height:100%;
}
body{
 height:100%;
 margin:0;
}
#content{
 width: 800px;
 min-height: 100%;
 background: #66ccff;
 margin:0 auto -150px;
}
#footer{
 width: 800px;
 height: 150px;
 background: #66cc00;
 margin:auto;
 clear:both;
}
.left{
 width:200px;
 float:left;
 outline:1px solid #9F00BF;
}
.right{
 width:200px;
 float:right;
 outline:1px solid #9F00BF;
}
.center{
 margin:0 210px;
 outline:1px solid #9F00BF;
}
.limiter{
 clear:both;
}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>Макет</title>
</head>
<body>
 <div id="content">
  <div class="right">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
  <div class="left">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text</div>
  <div class="center">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
  <div class="limiter"></div>
 </div>
 <div id="footer"></div>
</body>
</html>

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

4 Answers4