Fluid sticky footer with flex

2020-04-26 05:29发布

站内问答 / HTML/CSS
1535 2 5

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 

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

and main 

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

works fine if header, main and footer is one after another and all is inside body

but what if header is outside like in this template 

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

then if I add body class to body html element and main class to contentDiv it does not work if I add body class to mainDiv and main class to contentDiv then it almost works but my footer is lower of height of the headerDiv and there is scroll, how to avoid that ?

标签： html css flexbox
举报
2条回答
倾城　Initia
2楼-- · 2020-04-26 05:47

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) 举报
一纸荒年 Trace。
3楼-- · 2020-04-26 05:55

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)