Эластичная коробка, которая расширяется до нижней части экрана ⇐ CSS

[Anonymous]

Как я могу сделать красный «блок» растягиваться в нижнюю часть окна, нажимая «текст ниже ...» под нагрузкой /выключенным? ==. Высота иэтэна) PrettyPrint-Override ">

Код: Выделить всё

Definitive Expanding Block

:root {
--aside-w: 240px;
}

html, body {
height: 100%;
margin: 0;
}

body {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: var(--aside-w) 1fr;
grid-template-areas:
"header header"
"aside  main";
height: 100vh; /* Use height for a more rigid layout */
}

.site-header {
grid-area: header;
padding: 12px;
background: #222;
color: #fff;
}

.site-aside {
grid-area: aside;
padding: 12px;
background: #f3f3f3;
}

.site-main {
grid-area: main;
overflow: auto;
min-height: 0;
padding: 12px;
box-sizing: border-box;
}

.main-inner {
display: flex;
flex-direction: column;
min-height: 100%;
}

.block {
flex-grow: 1;
background: #ff5656;
padding: 12px;
box-sizing: border-box;
overflow: auto;
}

.main-top, .main-after {
flex-shrink: 0;
}

.main-top {
margin-bottom: 12px;
}

.main-after {
margin-top: 12px;
}

.site-main p {
margin: 0;
}



Header
Sidebar




Text above…
More stuff above…

Block
This block now expands to fill the available vertical space.
The layout forces the total content to be taller than the container, pushing the "Text below..." section reliably below the fold.

Text below…

Подробнее здесь: https://stackoverflow.com/questions/797 ... the-screen