Как заставить ребенка заполнить 100% высоту для эффекта прокрутки «полноэкранного», внутри динамического контейнера Flex ⇐ CSS

[Anonymous]

Я пытаюсь создать макет страницы со стандартной структурой: заголовок, нижний колонтитул и основной области содержания, которая заполняет доступное вертикальное пространство. Желаемое поведение: < /p>

[*] Первый раздел (.screen-1) должен занять ровно 100% видимой высоты своего контейнера прокрутки (.main-content-wrapper).
[*] Любое последующее содержание (.screen-2 и т. Д.) Должно быть расположены непосредственно под первым разделом. />

моя структура макета

Моя страница построена с помощью Flexbox.

• Высший уровень .main-content-wrapper имеет Flex: 1 , поэтому он растет, чтобы заполнить пространство между заголовком и нижним колонтитулом. Это элемент, который должен иметь свою собственную прокрутку при переполнении контента. Похоже, высота гибкого: 1 контейнер не «определяется» таким образом, что позволяет его детям эффективно использовать высоты на основе процента. . Screen-1 . Я ожидал, что это заставит его жадно занять все доступное пространство, нажимая. Screen-2 из взгляда. Оба раздела остаются видимыми одновременно.

Использование высоты: 100%: Я также попробовал настройку высоты: 100% или min-hight: 100% on. Screen-1
это не имело никакого эффекта. Элемент рухнул на высоту своего внутреннего содержания, вероятно, потому что его гибкий родитель (.page-main-content< /code>) не имеет определенной высоты для процента, основанного на. />





Flexbox Height Problem MRE

/* Basic Reset & Body Setup */
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
font-family: sans-serif;
}

/*
This is the main layout container, similar to my `layouts/default.vue`.
It arranges Header, Main Content, and Footer vertically.
*/
.layout-container {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #f0f2f5;
}

.app-header {
padding: 1rem;
background-color: #e3f2fd;
border-bottom: 1px solid #bbdefb;
text-align: center;
}

.app-footer {
padding: 1rem;
background-color: #e8f5e9;
border-top: 1px solid #c8e6c9;
text-align: center;
}

/*
This is the main content area that should fill the remaining space.
It has `flex: 1`. This is the container I want to have its own scrollbar.
*/
.main-content-wrapper {
flex: 1;
display: flex; /* This is crucial, it allows its child to grow */
flex-direction: column;

/* For demonstration: show the boundary and enable scrolling if content overflows */
overflow-y: auto;
border: 2px dashed red;
}

/*
This represents my "page" component, like `pages/index.vue`.
It's inside the main content wrapper.
*/
.page-main-content {
/* My initial attempt uses flex: 1 here */
flex: 1;
display: flex;
flex-direction: column;
}

/* --- THE PROBLEM IS HERE --- */

.screen {
display: grid;
place-items: center;
padding: 2rem;
font-size: 1.5rem;
font-weight: bold;
color: white;
}

/* This is "Screen 1" */
.screen-1 {
/* This is what I tried. It doesn't make the screen full-height. */
/* It just takes up the *remaining* space. */
flex: 1;
background-color: #3f51b5;
}

/* This is "Screen 2" */
.screen-2 {
/* This screen just takes space for its content, but it's still visible. */
background-color: #43a047;
min-height: 150px; /* Give it some height for the demo */
}






Header






Screen 1
I want this section to be 100% the height of the red dashed container.

Screen 2
I should only be visible after scrolling down inside the red dashed container.





Footer








Мой вопрос: Каков правильный подход CSS для создания.-Screen-1 Занимайте 100% от высоты его прокрутки..main-content-wrapper), тем самым принуждая. Screen-2 оттолкнуть и стать видимыми только после прокрутки? Это ключевое ограничение для меня, так как изменение оно сломало бы мою существующую макет.

Сказано, что я не совсем уверен, является ли моя HTML -структура правильным подходом для начала. Для полного контекста я также приложил свой оригинальный код VUE ниже для справки.















< /code>





Screen 1

Screen 2





Подробнее здесь: https://stackoverflow.com/questions/797 ... t-inside-a