发表新帖
发表新帖

Fluid sticky footer with flex

前端 未结
关注
2 661
暖寄归人
暖寄归人 2021-01-23 22:50

I am trying to make footer at the bootom with flex as described in this question How to make a fluid sticky footer

the answer with adding to the body 

bo
相关标签:
2条回答
  • 情歌与酒
    2021-01-23 23:43

    What if ?

    the second container can be a flexbox too ,

    Use the same CSS flex technic applied to body and #mainDiv to #mainDiv and #contentDiv, minus height since flex:1; is already sizing #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>

    0 讨论(0)
  • 半阙折子戏
    2021-01-23 23:51

    Try using a flex container on the #mainDiv with 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>

    0 讨论(0)
 看不清?
提交回复
热议问题