0

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

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

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

0

4 ответа 4

4

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

#content{
    min-height:100%;
}

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

#footer{
    position: absolute;
    bottom: 0;
    left: 0;
}
1
  • 1
    Да и не забыть контенту дать нижний паддинг на высоту футера
    – ferrari
    17 фев 2015 в 13:35
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;

1

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

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>

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