带有 flex 的流体粘性页脚答案

【问题标题】：Fluid sticky footer with flex带有 flex 的流体粘性页脚
【发布时间】：2018-03-26 17:07:38
【问题描述】：

我正在尝试使用 flex 在底部制作页脚，如本问题 How to make a fluid sticky footer 中所述

添加到正文的答案

body {
     padding: 0; margin: 0;
     display: flex;
     min-height: 100vh;
     flex-direction: column;
}

和主要的

main {
     flex: 1;
     padding: 1em;
}

如果页眉、主页和页脚一个接一个并且全部在正文中，则可以正常工作

但是如果标题在这个模板之外呢

<body>
   <div id="headerDiv"> This is header </div>
   <div id="mainDiv"> 
       <div id="contentDiv"> This is content </div>
       <div id="footerDiv"> This is footer </div>
   </div>
</body>

然后，如果我将 body 类添加到 body html 元素并将主类添加到 contentDiv 它不起作用如果我将主体类添加到mainDiv 并将主类添加到contentDiv 那么它几乎可以工作，但我的页脚低于headerDiv 的高度并且有滚动，如何避免这种情况？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果？

第二个容器也可以是弹性盒，

使用应用于body 和#mainDiv 到#mainDiv 和#contentDiv 的相同CSS flex 技术，减去高度，因为flex:1; 已经在调整#mainDiv 的大小。

body,
#mainDiv  {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
}
#mainDiv,
#contentDiv {
  flex: 1;
}

/* see them */
#headerDiv,#footerDiv {background:yellow;padding:1em}
#mainDiv {background:pink;}

<div id="headerDiv"> This is header </div>
<div id="mainDiv">
  <div id="contentDiv"> This is content </div>
  <div id="footerDiv"> This is footer </div>
</div>

【讨论】：

【解决方案2】：

尝试在#mainDiv 和justify-content: space-between 上使用弹性容器。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: orange;
  margin: 0;
}

#mainDiv {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<body>
  <div id="headerDiv"> This is header </div>
  <div id="mainDiv">
    <div id="contentDiv"> This is content </div>
    <div id="footerDiv"> This is footer </div>
  </div>
</body>

【讨论】：