1

Не могу что фетур был в низу страницы при появлении заглушки... Пример тут 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 должен быть поверх страницы...

5
  • 1
    У тебя ведь .cap позиция назначена position: absolute и он просто выйдет в следующий так называемый слой, и будет поверх других блоков...) И это же препятствует твоему футеру. Попробуй фиксированную позицию что-ли...
    – E1mir
    Commented 22 июн. 2016 в 10:44
  • @KryTer_NexT контент который будет подгружаться в .cap может быть больше чем размер страницы, можно сделать со .cap я знаю, но то есть вариантов сss нет?
    – bsbak
    Commented 22 июн. 2016 в 10:48
  • Можно сделать так называемый 'резиновый' футер, просто при добавлении контента, футер вниз уходил вместе с контентом, а в css: postion: absolute убрать и сделать отдельный блочный элемент, этот position: absolute ужасная вещь, с нею трудно работать особенно если ты верстаешь сайт не только для экрана с одним разрешением..
    – E1mir
    Commented 22 июн. 2016 в 10:52
  • Возможный дубликат вопроса: Как прижимать footer всегда к низу экрана? Commented 7 февр. 2017 в 19:23

1 ответ 1

0

*{
  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>

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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