Розширення #downдитини для заповнення залишкового простору #containerможе здійснюватися різними способами залежно від підтримки браузера, яку ви хочете досягти, і від того, чи #upмає певну висоту.
Зразки
.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}
<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>
Сітка
gridМакет CSS пропонує ще один варіант, хоча він може бути не таким простим, як модель Flexbox. Однак вимагає лише стилізації елемента контейнера:
.container { display: grid; grid-template-rows: 100px }
grid-template-rowsВизначає перший рядок в якості фіксованої 100px висоти, і залишаються рядки будуть автоматично розтягуватися , щоб заповнити простір, що залишився.
Я впевнений, що IE11 вимагає -ms-префіксів, тому переконайтесь, що перевірити функціональність у веб-переглядачах, які ви хочете підтримувати.
Flexbox
Модуль гнучкої компоновки модуляflexbox CSS3 ( ) зараз добре підтримується і може бути дуже простим у виконанні. Оскільки він гнучкий, він працює навіть тоді, коли #upне має визначеної висоти.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
Важливо зауважити, що підтримка IE10 та IE11 для деяких властивостей flexbox може бути помилковою, а IE9 або нижче не має жодної підтримки.
Розрахована висота
Ще одне просте рішення - використовувати функціональний блок CSS3calc , як вказує Альваро у своїй відповіді , але для цього потрібно, щоб висота першої дитини була відомою цінністю:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
Він досить широко підтримується, єдиними помітними винятками є <= IE8 або Safari 5 (відсутність підтримки) та IE9 (часткова підтримка). Деякі інші проблеми включають використання calc у поєднанні з трансформацією або полем-тінню , тому не забудьте протестувати в декількох браузерах, якщо це стосується вас.
Інші альтернативи
Якщо потрібна підтримка старшого віку, ви можете додати, height:100%;щоб #downзробити рожевий дів на повний зріст, з одним застереженням. Це призведе до переповнення контейнера, тому що #upштовхає його вниз.
Тому ви можете додати overflow: hidden;його до контейнера, щоб виправити це.
Крім того, якщо висота #upфіксована, ви можете розмістити її абсолютно в контейнері і додати набивний верх #down.
І ще одним варіантом буде використання дисплея таблиці:
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}