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

Разбираемся в CSS
Ответить
Anonymous
 Эластичная коробка, которая расширяется до нижней части экрана

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»