0

В комментариях есть пояснения.
Там надо, скорее всего, избавиться от абсолютного позиционирования, как, не пойму пока.

.head {
  float: left;
  width: 100%;
  background: #ddd;
  height: 200px;
}
.cont {
  background: #a1b1e1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 200px;
  width: 100%;
}
.content {
  height: 100px;
  width: 500px;
  background: #aaa;
  margin: 0 auto;
}
<div class="head">
  header
</div>
<div class="cont">
  <div class="content">
    content
  </div>
</div>
<!-- cont всегда должен растягиваться не завимо от контейнера .content, 
и нижняя его граница всегда  снизу окна браузера, 
даже если .content будет меньше его 
Дайте контейнеру .content высоту 1000 у увидите что .cont не тянется
-->

jsfiddle

3 ответа 3

1

Попробуйте такой вариант, позиционирование элементов кардинально изменилось

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #ddd;
  height: 100px;
}
.cont {
  margin: 0;
  background: #a1b1e1;
  width: 100%;
  min-height: 100%;
}
.push {
  height: 110px;
}
.content {
  height: 100px;
  width: 500px;
  background: #aaa;
  margin: 0 auto 0;
}
<div class="head">
  header
</div>
<div class="cont">
  <div class="push"></div>
  <div class="content">
    content
  </div>
</div>
<!-- cont всегда должен растягиваться не завимо от контейнера .content, 
и нижняя его граница всегда  снизу окна браузера, 
даже если .content будет меньше его 
Дайте контейнеру .content высоту 1000 у увидите что .cont не тянется
-->

0

Зачем вы используете абсолютное позиционирование для обертки контента? Если это было с целью того, чтобы .head не схлопывался потому, что вы дали ему float: left;, то добавьте еще overflow: hidden;

Теперь удалите абсолютное позиционирование у вашей обертки, .cont. - и проблема будет сразу же решена. Также высота .cont будет 100%.

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.head {
    float: left;
    width: 100%;
    background: #ddd;
    height: 50px;
}
.cont {
    background: #a1b1e1;
    width: 100%;
    min-height: 100%;
}
.content {
    height: 300px;
    width: 500px;
    background: #aaa;
    margin: 0 auto;
}
8
  • Обёртка будет обрезать .content по своей высоте.
    – MasterAlex
    28 сен 2014 в 5:00
  • обертка (.cont) обрезать не будет (.content) по своей высоте потому, что высоту в данном случае задает внутренний блок(.content). Обертка(.cont) будет тянутся по высоте вложенного блока(.content). Если это не то, значит я не правильно понял задачу автора.
    – nosensus
    28 сен 2014 в 5:16
  • Попробуйте в примере автора сделать высоту 1000px для .content и добавить overflow:hiedden для .cont, автор хочет, чтобы и .cont и .content становились 1000px.
    – MasterAlex
    28 сен 2014 в 5:24
  • Все, понял теперь) Спасибо за разъяснение. Сейчас исправлю свой ответ.
    – nosensus
    28 сен 2014 в 5:40
  • Только там есть ещё одно условие, .cont должен прилипнуть к низу, независимо от размера .content.
    – MasterAlex
    28 сен 2014 в 5:50
0

Обновила ответ

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
header,
nav,
section,
article,
aside,
footer {
  display: block;
}
body {
  font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
  width: 100%;
  height: 100%;
  background-color: yellow;
}
#wrapper {
  width: 100%;
  margin: 10px auto 0;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  display: block;
}
header {
  top: 5px;
  position: relative;
  width: 100%;
  height: 100px;
}
#content {
  display: block;
  padding: 0 0 100px;
  position: relative;
}
#content:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
footer {
  top: 200px;
  width: 100%;
  bottom: 0;
  position: fixed;
  z-index: 150;
  _position: absolute;
  _top: expression(eval(document.documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)));
  height: auto;
  min-height: 100px;
  background: blue;
}
.inside {
  display: block;
  max-width: 200px;
  height: 1000px;
  background: red;
  margin: 0 auto;
}
<div id="wrapper">
  <header>
    header
  </header>
  <section id="content">
    <h2>Awesome content</h2>
  </section>
  <footer>
    <div class="inside">
      hjkhkj
    </div>
  </footer>
</div>

Идея с тестированием пользовательского скролла взята отсюда

1
  • Увы, при маленьком значении высоты div.content контейнер div.cont не тянется книзу =(
    – Fikret
    27 сен 2014 в 16:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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