Проблемы с макетом flexbox в приложении angular ⇐ CSS

[Anonymous]

Я пытаюсь создать макет с помощью flexbox, в котором есть следующие элементы:

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

по сути, это именно та структура, которая мне нужна.
Чтобы воспроизвести это в моем app.comComponent.ts, я создал этот макет:

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

[img]assets/background.png[/img]

app.comComponent.css:

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

.background {
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
background-position: center;
background-size: 0%;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}

.application-body {
margin: 0;
padding: 0;
height: 100%;
}

header {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 64px;
background: linear-gradient(to right, #e03434, #dc6869);
color: #fff;
padding: 20px;
width: 100%;
}

footer {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 64px;
background: linear-gradient(to right, #e03434, #dc6869);
color: #fff;
padding: 20px;
width: 100%;
}

ion-title {
color: var(--ion-color-text);
font-size: 1.5rem;
font-weight: bold;
}

@media only screen and (min-width: 768px) {
ion-title {
font-size: 2rem;
}
}

login-page.comComponent.html:

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

login-template.comComponent.html:

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

Acesse agora!














Acessar agora
Criar conta

и, наконец, глобальные стили (styles.css):

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

.flex-container {
display: flex;
flex-direction: column;
min-height: calc(100vh - 64px);
background-color: white;
border: solid 8px blue;
align-items: center;
}

.page-content {
flex: 1;
overflow-y: auto;
border: solid 4px purple;
}

.page-content.no-overflow {
overflow-y: hidden;
}

.template-container {
display: flex;
flex-direction: row;
max-height: 100%; /* Define a largura máxima do template */
min-height: calc(100% + 64px); /* Define a largura máxima do template */
justify-content: center; /* Centraliza o conteúdo horizontalmente */
align-items: center; /* Centraliza o conteúdo verticalmente */
}

.left-content,
.right-content {
display: flex;
max-height: 100%;
border: solid 4px red;
flex-direction: column;
width: 50%;
}

.title {
font-size: 32px;
}

.title-container {
display: flex;
justify-content: center;
}

@media only screen and (max-width: 767px) {
.page-content {
align-items: center;
}
.template-container {
flex-direction: column;
padding: 32px;
margin: 0;
}

.left-content,
.right-content {
width: 100%;
}
}

.left-content,
.right-content {
display: flex;
max-height: 100%;
border: solid 4px red;
flex-direction: column;
width: 50%;
}

.left-content {
align-items: flex-end;
}

.right-content {
align-items: flex-start;
}

.button-container {
display: flex;
justify-content: center;
}

.bottom-button {
position: absolute;
bottom: 0;
width: 100%;
padding: 16px 0;
}

Проблема в том, что содержимое страницы увеличивается больше, чем размер гибкого контейнера, что приводит к некоторым проблемам с его визуализацией. Содержимое страницы начинается за заголовком.


Кто-нибудь может с этим помочь? Я очень плохо разбираюсь в css.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ngular-app