html - Flexbox 布局在移动 View 中保持重叠的页脚

Question

我正在尝试使用带有页眉和页脚的 flexbox 列布局。当浏览器最大化时，布局看起来很干净。当您调整窗口大小时(如在手机上查看)我试图让 block 堆叠，但主要内容与左栏重叠，右栏与页脚重叠。

.wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(100vh - 80px);
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
header {
  padding: 20px;
  background: #222930;
  color: #E9E9E9;
  height: 125px;
}
footer {
  padding: 20px;
  background: #222930;
  color: white;
  bottom: 0;
  text-align: center;
}
main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background: #222930;
}
main .content {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background: #222930;
  color: #E9E9E9;
}
main .left {
  width: 160px;
  background: #222930;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
  color: #E9E9E9;
}
main .right {
  width: 160px;
  background: #222930;
  color: white;
}
@media (max-width: 640px) {
  main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  main .left,
  main .right {
    width: auto;
    height: 50px;
  }
}

<div class="wrap">
  <header>header</header>
  <main>
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </main>
  <footer>footer</footer>
</div>

我页面上还有更多内容，但我认为没有必要粘贴它。如果有人对我正在经历的事情感到好奇，这里是它最大的视觉效果: 这就是它在手机上的样子:

就像我说的，我试图让 block 彼此堆叠，或者甚至在缩小时让菜单变成下拉菜单，但页脚仍然重叠。

一些建议会很好，但不确定我在这里遗漏了什么。我第一次尝试 flexbox 方法..

Answer 1

看起来你的 flex 容器有一个固定的高度:

.wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);    /* fixed height */
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

尝试使用 min-height 而不是 height，这将允许容器增长。