Как заставить дочернего дивиации взять 100% высоты своего родителя, который имеет «Flex: 1`, чтобы создать полноэкранную ⇐ Html

[Anonymous]

Я новичок в создании сложных макетов с помощью Flexbox, и я столкнулся с проблемой, которую я не могу решить. Идея состоит в том, что первый раздел (давайте назовем его «экран 1») должен занять ровно 100% от видимой высоты основной области содержания. Любой другой контент («экран 2») должен быть расположен непосредственно под ним, чтобы пользователь должен прокрутить в основной области содержания , чтобы увидеть его. Похоже, что высота родителя (Element Flex: 1 ) не «определен» таким образом, что его дети могут использовать для высот на основе процента. Контейнер для заголовка, основного контента и нижнего колонны - это гибкая колонка. Сама основная область контента имеет гибкость: 1 , поэтому она растет, чтобы заполнить пространство. Вот где живут экраны.
Моя первоначальная попытка заключалась в том, чтобы дать «Экран 1» a Flex: 1 и свойство. с точки зрения, создавая прокрутку в основной области контента. Оба раздела видны на экране одновременно, что не является желаемым эффектом. Элемент, кажется, просто рухнет до высоты своего внутреннего содержания. Я удалил все рамки, чтобы сохранить его просты.

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

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: 300px; /* 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

Как я могу правильно сделать. Screen-1 занять 100% высоты своего родителя (

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

.main-content-wrapper

), принуждение. Screen-2 быть «отталкиваемым» и доступен только с помощью прокрутки?
Заранее спасибо за помощь

Подробнее здесь: https://stackoverflow.com/questions/797 ... lex-1-to-c