我尝试创建具有以下功能的 CSS 模板：
对于较小的视口（<1200px）单列，包含以下项目：
box-menubox-databox-footer
对于更大的视口，请切换到两列布局：
- 左栏：
box-menu无需box-footer滚动 - 右列：如果内容长度超过可用高度，则仅
box-data允许滚动此列
- 左栏：
这是我的代码：
: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>较小的视口代码运行良好。当它切换到两列布局时，它会被放置在导致间隙的后面box-footer（正如预期的那样） ：box-data
我尝试使用属性来修复order，但它改变了项目的顺序，而不是流的顺序。
据我所知，flex 将计算 1. 左上角、2. 右上角、3. 左下角等...相反，为了满足我的需要，它应该是 1 左上角（菜单）、2 左下角（页脚）和 3 右上角（数据）。
如何将其无间隙地放置box-footer在正下方？box-menu
