Question

我有一个非常简单的flexbox结构，其中包含页眉，主要和页脚子元素，其中页脚是结尾项，并充当粘滞页脚，以留在长页面的页面底部。但是每当窗口缩小（高度）时，页脚就会覆盖所有内容（其他同级元素），就像它具有固定的position属性一样。

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

我的结构：

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：视口的高度。

您的#footer元素具有align-self: flex-end。这意味着它将与弹性容器的末端对齐：页面的底部。

通过替换以下内容，您可以具有确保页面覆盖整个屏幕的效果，同时允许页面增长和页脚随其移动：

 height: 100vh;

具有：

 max-height: 100vh;

在html，body和#main中。

此外，页眉和页脚自然会与起点和终点对齐，因为它们就在DOM中。随时删除align-self规则。

Flex粘性页脚在窗口调整大小（高度收缩）时与Flex兄弟姐妹重叠

1 个答案: