Dehnbare Box, die sich am unteren Rand des Bildschirms ausdehnt ⇐ CSS

[Anonymous]

Wie kann ich den roten "Block" bis zum Boden des Fensters dehnen und "Text unten ..." unterhalb des Bildschirms drücken? ==. PrettyPrint-Override ">

Code: Select all

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…