Как сделать footer в низу страницы

Question

Не могу что фетур был в низу страницы при появлении заглушки... Пример тут JSFIDDLE

html:

<body>
  <div class="cap">
 cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>
  </div>
  <div class="page">page</div>
  <div class="footer">footer</div>
</body>

css:

html,
body {
  height: 100%;
}
.cap {
  position: absolute;
}
.page {
  height: auto;
  min-height: 100%;
  padding-bottom: 50px;
  background-color: #ccc;
  text-align: center;
}
.footer {
  height: 50px;
  margin-top: -50px;
  background-color: #bbb;
  text-align: center;
}

Если прокрутить вниз страницы, то .cap вылазит за приделы футера (а нужно что бы футер тоже был в низу страницы), .cap должен быть поверх страницы...

У тебя ведь .cap позиция назначена position: absolute и он просто выйдет в следующий так называемый слой, и будет поверх других блоков...) И это же препятствует твоему футеру. Попробуй фиксированную позицию что-ли... — E1mir, Jun 22 '16 at 10:44
@KryTer_NexT контент который будет подгружаться в .cap может быть больше чем размер страницы, можно сделать со .cap я знаю, но то есть вариантов сss нет? — bsbak, Jun 22 '16 at 10:48
Можно сделать так называемый 'резиновый' футер, просто при добавлении контента, футер вниз уходил вместе с контентом, а в css: postion: absolute убрать и сделать отдельный блочный элемент, этот position: absolute ужасная вещь, с нею трудно работать особенно если ты верстаешь сайт не только для экрана с одним разрешением.. — E1mir, Jun 22 '16 at 10:52
Возможный дубликат вопроса: Как в адаптивном сайте с изменяемой высотой футера, прибить его к низу страницы — MobiDevices, Jan 03 '17 at 11:32
Возможный дубликат вопроса: Как прижимать footer всегда к низу экрана? — MobiDevices, Feb 07 '17 at 19:23

score 0 · Accepted Answer · answered Jun 22 '16 at 23:05

*{
  margin:0;
  padding:0;
}
.header,.footer{
  width:90%;
  margin:3px auto;
  background:rgba(200,200,200,.4);
}
.header{
 height:120px;
}
.footer{
  height:140px;
}
.clear{
 display:block;
 clear:both;
}
.clear:after{
 content:"";
 display:block;
 clear:both;
}
.main{
 width:90%;
 margin:3px auto;
}
.aside,.article{
 float:left;
 box-sizing:border-box;
 background:rgba(200,200,200,.4);
}
.aside{
 width:30%;
 min-height:150px;
}
.article{
 width:69%;
 min-height:200px;
 margin-left:1%;
}

<div class="header"> header </div>
<div class="main clear"> 
   <div class="aside">aside</div>
   <div class="article">article</div>
</div>
<div class="footer">footer</div>

Ну собственно сама разметка , как видно не сложная , подвал сам оказывается в само низу , вот и всё Позиционированием в этом случае не надо пользоваться

Как сделать footer в низу страницы

1 Answers1