• 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.

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


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

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

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

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

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

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

Войти

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

Войти сейчас


Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы