• 0
sarcus

Расстягиваем внешний div самым внутренним по высоте

Вопрос

Есть вложенные блоки

<div id="d1">

<div id="d2">

<div id="d3">

.......

</div>

</div>

</div>

Нужно чтобы все блоки имели высоту 100%  и самый внутренний div (он может быть и 4-м... вложением) растягивал все внешние в зависимости от контента если контент больше 100%.

Желательно без js.

Изменено пользователем sarcus

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

8 ответов на этот вопрос

  • 0

Разве для этого min-height не подходит? https://jsfiddle.net/erc9s7nn/1/

Изменено пользователем Даниил Виттманн
Поправка

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Не то. Изначально высота внутреннего блока должна быть 100% от высоты экрана. Далее, в зависимости от контента, растягиваем внешний блок. (+ поддержка ie8)

Изменено пользователем sarcus

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Ну только что, думал можно как-то иначе, всю голову сломал :) Но таблицами  ie8 не хочет растягивать внутренние дивы, у меня не получилось, и в твоем примере так же, а у меня он еще есть, так бы забил.

Изменено пользователем sarcus

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
В 25.04.2017 в 06:33, sarcus сказал:

Изначально высота внутреннего блока должна быть 100% от высоты экрана

min-height: 100vh;

1vh - это высота в 1% относительно высоты экрана, соответственно 100vh - 100%

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
19 минут назад, Даниил Виттманн сказал:

1vh - это высота в 1% относительно высоты экрана, соответственно 100vh - 100%

IE 8 их не поддерживает.

http://caniuse.com/#search=vh

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Жаль конечно, нет красивого решения. Большое спасибо за ответы.  Просто задачка интересная, но не для ie8.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас