1

Доброго времени суток!

Сразу скажу, что я пользовался поиском и не смог найти ответа именно на мою вариацию вопроса.

И еще добавлю, что у меня две части одного вопроса, поэтому сразу прошу прощения за много букв и, возможно, сложный для восприятия текст.

Предисловие.

У меня есть шапка с фиксированной высотой, допустим 150px (на самом деле 169, и вообще изменяется в зависимости от media queries, но ведь это не важно). Далее DIV, который я и хочу растянуть на 100% оставшейся высоты между шапкой и следующими слоями. И один слой с фиксированной высотой 100px и подвал с фиксированной (простите за тавтологию) высотой 60px. То есть формула простая:

neccesary_height = window.outerHeight - 310

По сути, вот есть пример другого автора, который работает идеально, если на всю высоту контейнера есть контент.

http://jsfiddle.net/gBr58/1/

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

Вопрос 1.

А если контента меньше всей оставшейся высоты окна или вообще нет, то при изменении размера окна (или изначально маленькой высоте) все блоки ниже просто наезжают на него и потом он исчезает совсем.

http://jsfiddle.net/qsad/x8s0rytk/

Есть ли у кого-нибудь идеи как это решить? CSS, JavaScript - все подойдет.

Вопрос 2.

Если внутри этого DIV расположить два блока с:

width:50%; float:left; height:100%;

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

А мне нужно, чтобы они наследовали..

http://jsfiddle.net/qsad/zdm6e0Lk/

Заранее благодарю за ответы.

1
  • флексами тока если 10 авг 2016 в 7:55

1 ответ 1

2

Если я вас правильно понял calc должен решать вашу задачу:

html, body {
  margin: 0;
  height: 100%;
  font-family: sans-serif;
  font-size: 0.9em;
}
.relative {
  position: relative;
}
.header {
  height: 150px;
  background: #aaeedd;
}
.elastic {
  height: calc(100% - 300px);
  min-height: 30px;
  background: #efefef;
}
.elastic_half {
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
}
.elastic_half:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background: #888;
}
.elastic_half:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: #888;
}
.fixed {
  height: 100px;
  background: #eeddaa;
}
.footer {
  height: 50px;
  background: #ddaaee;
}
.label {
  padding: 0 5px;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1;
  height: 20px;
  line-height: 20px;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  border-radius: 3px;
}
<header class="header relative">
  <span class="label">Шапка</span>
</header>
<div class="elastic relative">
  <span class="label">Тянущийся DIV</span>
  <div class="elastic_half"></div>
  <div class="elastic_half"></div>
</div>
<div class="fixed relative">
  <span class="label">DIV с фиксированной высотой</span>
</div>
<footer class="footer relative">
  <span class="label">Подвал</span>
</footer>

2
  • Благодарю, изящное решение, да и с хорошим дизайном :) Жалко только, что calc() не поддерживается Оперой и IE < 9 и IE = 10. 10 авг 2016 в 8:08
  • @АлюминиевыйРобот "Жалко только, что calc() не поддерживается Оперой и IE < 9 и IE = 10." Я вам сочувствую :")
    – qodunpob
    10 авг 2016 в 8:13

Ваш ответ

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

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