Как растянуть высоту div для заполнения родительского div

107

У меня есть страница с div, как показано ниже

<div id="container">
    <div id="A">
    </div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D">
    </div>
</div>

со стилем как;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

Я хочу , чтобы отрегулировать высоту DIV B2для заполнения (или растянуть на весь) DIV B(помеченный зеленой рамкой) и не хочу , чтобы поперечный колонтитул DIV D. Вот рабочая скрипку демо (обновленный). Как я могу это решить ??

css

— Альфред
источник

38

Просто добавьте height: 100%;к #B2укладке. min-heightне должно быть необходимости.

— Снорбакл
источник

4

Так будет, если разница пуста.

— x10

39

плохой ответ # B2 будет такого же роста, как #B, но не растянется, чтобы заполнить оставшееся пространство, как было предложено

— гнездо

3

это не работает для div с другим floatродителем?

— Дон Чидл,

он покрывает B1 и занимает все пространство; /

— mikus 03

1

Это явно не работает, height: 100% - это 100% контейнера (я думаю, что чаще всего весь вьюпорт) - его высота будет больше, чем хотелось бы.

— BT

25

Предположим, у вас есть

<body>
  <div id="root" />
</body>

С обычным CSS вы можете сделать следующее. См. Рабочее приложение https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

С помощью flexbox вы можете

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

— onmyway133
источник

10

http://jsfiddle.net/QWDxr/1/

Используйте свойство "min-height".
Остерегайтесь отступов, полей и границ :)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

— x10
источник

1

нет .. он заполняет всю страницу с верхним полем. я просто хочу заполнить конкретный divB

— Альфред

Он корректно работает в chrome и firefox. Если это не сработает для вас, вы можете использовать Faux Columns

— x10,

он работает, но сокращает нижний колонтитул div id= D. Я не хочу, чтобы он пересекал div d

— Альфред

2

height:100%отсутствует точка с запятой для #B2стиля.

— Эмиль

5

Моей целью было создание div, который всегда был ограничен фиксированной величиной в пределах всего окна браузера.

Что сработало, по крайней мере, в firefox, так это

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

Поскольку фактическое окно не принудительно прокручивается, div сохраняет свои границы до края окна во время изменения размеров.

Надеюсь, это кому-то сэкономит время.

— Лео Смит
источник

5

Если вы собираетесь использовать B2 для стилизации, вы можете попробовать эту "хитрость"

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

— Teneff
источник

1

Это работает, спасибо. Кстати, так и должно быть margin-bottom: -9999px;. Вам не хватает минуса.

— Гауи

1

B2 положение контейнера относительно

Верхнее положение B2 + оставшейся высоты

Высота B2 + высота B1 или оставшаяся высота

— Дмитрий Юрченко
источник

Установка родительского узла в относительное положение решила мою несвязанную проблему! Спасибо!

— Deejers,

0

Пользуюсь height: stretch;. Здесь вы можете найти некоторые подробности об использовании.

— Игорь
источник

-4

Я бы решил это с помощью решения javascript (jQUery), если размеры могут отличаться.

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
источник

8

Вы можете добавить это к своему вопросу :)

— NKCSS

48

Разве отсутствия тега javascriptили jqueryтега недостаточно?

— капа

1

Это тоже совершенно не нужно. CSS прошел долгий путь за последние пару лет. Оформить заказ на flex-box и calc ().

— Шон Уинни,

1

Flexbox не поддерживает <IE10 :(

— Constant Meiring

@ConstantMeiring Реальный вопрос в том, кого вообще волнует <IE10? ;)

— Clonkex

Как растянуть высоту div для заполнения родительского div - CSS