Flex 粘性页脚在窗口调整大小时与 flex 兄弟重叠（高度缩小）答案

【问题标题】：Flex sticky footer overlaps flex siblings on window resize (height shrink)Flex 粘性页脚在窗口调整大小时与 flex 兄弟重叠（高度缩小）
【发布时间】：2018-10-29 09:17:46
【问题描述】：

我有一个非常简单的 flexbox 结构，其中包含页眉、主元素和页脚子元素，其中页脚是结束项目，并起到粘性页脚的作用，以便在长页面上停留在页面底部。但是每当窗口缩小（高度）时，页脚就会与所有内容（其他同级）重叠，就像它具有固定的位置属性一样。

我希望它具有默认行为，并且与其他在站点高度太小而无法显示当前最后一项时隐藏的行为相同。

我的结构：

HTML

<div id="main">
  <div id="alternate_header"></div>
  <div id="header">
    <div>1</div><div>2</div>
  </div>
  <div id="content">body</div>
  <div id="footer">footer</div>
</div>

CSS

body,html {

  margin: 0;
  height:100vh;

}

#main {

  display:flex;
  flex-direction: column;
  width:100%;
  height:100vh;
  min-height:0;

}

#main > div {

  width: 100%;

}

#alternate_header {

  display; none;

}

#header {

  background-color:red;
  height:5rem;
  line-height:5rem;
  align-self:flex-start;
  display:flex;
  flex-direction:row;

}

#header > div {

  flex:1;
}

#content {

  flex:1;
  background-color:#dcdcdc;
  min-height:0;

}

#footer {

  align-self:flex-end;
  background-color: yellow;
  height: 4rem;

}

JSFIDDLE

【问题讨论】：

为什么要在html、body & #main上设置固定高度？
是的，想通了。上述元素的固定高度会导致此问题。应该都是min-height。添加一个答案以供其他人接受，以免犯同样的错误。
很好地解决了这个问题。我添加了一个带有更多解释的答案:)

标签： html css flexbox

【解决方案1】：

问题是由在容器上设置固定高度引起的：html、body 和 #main。这意味着你的 flexbox 容器的高度将永远是 100vh：视口的高度。

您的#footer 元素具有align-self: flex-end。这意味着它将自己对齐到 flex 容器的末尾：页面底部。

通过替换，您可以获得相同的效果，即确保页面覆盖整个屏幕，同时允许页面增长和页脚移动：

 height: 100vh;

与：

 max-height: 100vh;

在html、body 和#main。

此外，页眉和页脚自然会与开始和结束对齐，因为那是它们在 DOM 中的位置。随意删除align-self 规则。

【讨论】：