Question

我正试图按照此问题How to make a fluid sticky footer

中所述使用flex在bootom中制作页脚

添加到身体的答案

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

Answer 1

怎么办？

第二个容器也可以是flexbox，

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

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

Answer 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>

柔韧的流体粘性页脚

2 个答案: