Як розтягнути висоту діва, щоб заповнити батьківський div

107

У мене є сторінка з дівами, як нижче

<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

Буде, якщо dif порожній.

— x10

39

погана відповідь # B2 буде такою ж високою, як # B, але не розтягнеться, щоб заповнити залишився простір, як просили

— гніздо

3

це не працює для діва з іншим, floatто це батько?

— Дон Чіддл

він охоплює B1 і займає весь простір; /

— mikus

1

Це явно не працює, висота: 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%;
}

З флексом ви можете

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

— Альфред

Правильно працює у хромі та firefox. Якщо це не допоможе вам, ви можете використовувати стовпці Faux

— 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

— Тенеф
джерело

1

Це працює, дякую. До речі, так і має бути margin-bottom: -9999px;. Ви пропускаєте мінус.

— Гауї

1

Відносні положення контейнера B2

Верхня позиція В2 + залишку висоти

Висота 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);

— НККСС
джерело

8

Ви можете додати це до свого питання :)

— NKCSS

48

Чи недостатньо відсутності тегу javascriptчи jqueryтегу?

— капа

1

Це також абсолютно непотрібно. CSS пройшов довгий шлях за останні пару років. Оформити замовлення flex-box та calc ().

— Shawn Whinnery

1

Flexbox не підтримує <IE10 :(

— Постійний показ

@ConstantMeiring Справжнє питання, чи хтось навіть не хвилює <IE10? ;)

— Клонкекс

Як розтягнути висоту діва, щоб заповнити батьківський div - CSS