html - Flex 粘性页脚在窗口调整大小时与 flex sibling 重叠(高度缩小)

Question

我有一个非常简单的 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

Answer 1

问题是由在容器上设置固定高度引起的:html、body 和 #main。这意味着您的 flexbox 容器的高度将始终正好是 100vh:视口(viewport)的高度。

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

您可以确保页面覆盖整个屏幕，同时允许页面增长和页脚随之移动，通过替换:

 height: 100vh;

与:

 max-height: 100vh;

在 html、body 和 #main 中。

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