• 0
sarcus

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

    Вопрос

    sarcus

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

    <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
    sarcus

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

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

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


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

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

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

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


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

    Ну тогда по-уродски вешать классы и чередовать table и table-cell.

    https://codepen.io/anon/pen/OmbLVy

     

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


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

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

    min-height: 100vh;

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

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


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

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

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

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

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


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

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

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


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

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

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

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

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

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

    Войти

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

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • advertisement_alt
    • advertisement_alt
    • advertisement_alt