Esta é minha tentativa de criar um modelo CSS com os seguintes recursos:
para viewports menores (< 1200px) coluna única, com estes itens:
box-menu
box-data
box-footer
para janelas de visualização maiores, mude para um layout de duas colunas:
- coluna da esquerda:
box-menu
ebox-footer
sem qualquer rolagem - coluna da direita:
box-data
permitindo a rolagem desta coluna somente se o conteúdo for maior que a altura disponível
- coluna da esquerda:
Aqui está meu código:
:root {
--color-text: #521D03;
--color-menu-background: #33dd00;
--color-content-background: #FFFFFF;
--color-lines: #521D03;
}
html,
body,
.container {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.button {
display: block;
font-weight: bold;
font-size: 32px;
line-height: 0.9em;
text-decoration: none;
letter-spacing: 0.02em;
color: var(--color-text);
}
.box {
padding: 1em;
box-sizing: border-box;
display: flex;
flex-flow: column;
color: var(--color-text);
}
.box-menu {
background-color: var(--color-menu-background);
text-align: center;
justify-content: space-around;
}
.box-data {
background-color: var(--color-content-background);
background-color: #aaaaaa;
flex: 1;
}
.box-footer {
background-color: var(--color-menu-background);
line-height: 1em;
text-align: center;
}
.box-menu .menu-header {
display: flex;
flex-direction: column;
justify-content: center;
}
.box-data .data-header {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-data .data-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-data .data-footer {
flex: 0 1 150px;
text-align: center;
}
/* Larger viewports */
@media (min-width: 1200px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.box-menu,
.box-data,
.box-footer {
flex-basis: 50%;
}
.box-menu {
height: calc(100% - 150px);
}
.box-footer {
height: 150px;
}
.box-data {
height: 100%;
overflow-y: auto;
}
}
<div class="container">
<div class="box box-menu">
<div class="menu-header">
<h1>MY LOGO</h1>
</div>
<div class="menu-content">
<a class="button" href="/">MENU 1</a>
<a class="button" href="/">MENU 2</a>
<a class="button" href="/">MENU 3</a>
</div>
</div>
<div class="box box-data">
<div class="data-header">
<div class="nav-section">
<h3>MY NAV</h3>
</div>
</div>
<div class="data-content">
MY LONG CONTENT
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</p>
</div>
<div class="data-footer">
<div class="menu-content">
<a class="button clear">MY BUTTON</a>
</div>
</div>
</div>
<div class="box box-footer">
MY FOOTER
</div>
</div>
O código de viewport menor está funcionando bem. Quando ele muda para o layout de duas colunas, o box-footer
é colocado (como esperado) depois do box-data
causando uma lacuna:
Tentei consertar com a order
propriedade, mas ela altera a ordem dos itens, não a ordem do fluxo.
Pelo que entendi, o flex contará 1. superior esquerdo, 2. superior direito, 3. inferior esquerdo, etc. Em vez disso, para atender às minhas necessidades, deveria ser 1 superior esquerdo (menu), 2 inferiores esquerdos (rodapé) e 3 superiores direitos (dados).
Como colocar o box-footer
logo abaixo box-menu
sem deixar espaço?