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

Question 1

У меня есть страница с 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. Вот рабочая скрипку демо (обновленный). Как я могу это решить ??

Question 2

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

Question 3

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

<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%
}

Question 4

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;
}

Question 5

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

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

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

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

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

Question 6

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

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

jsFiddle

Question 7

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

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

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

Question 8

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

Question 9

Я бы решил это с помощью решения 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);

Answer 1

У меня есть страница с 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. Вот рабочая скрипку демо (обновленный). Как я могу это решить ??

Answer 2

38

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

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

4

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

x10

39

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

гнездо

3

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

Дон Чидл,

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

mikus 03

1

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

BT

Answer 3

4

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

x10

Answer 4

39

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

гнездо

Answer 5

3

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

Дон Чидл,

Answer 6

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

mikus 03

Answer 7

1

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

BT

Answer 8

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

<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%
}

Answer 9

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стиля.

Эмиль

Answer 10

1

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

Альфред

Answer 11

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

x10,

Answer 12

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

Альфред

Answer 13

2

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

Эмиль

Answer 14

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

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

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

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

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

Answer 15

5

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

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

jsFiddle

Teneff
источник

1

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

Гауи

Answer 16

1

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

Гауи

Answer 17

1

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

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

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

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

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

Deejers,

Answer 18

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

Deejers,

Answer 19

0

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

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

Answer 20

-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

Answer 21

8

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

NKCSS

Answer 22

48

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

капа

Answer 23

1

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

Шон Уинни,

Answer 24

1

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

Constant Meiring

Answer 25

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

Clonkex

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

Ответы: