Код: Выделить всё
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
