Fluid Sticky Footer With Flex
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; margi
Solution 1:
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;}<divid="headerDiv"> This is header </div><divid="mainDiv"><divid="contentDiv"> This is content </div><divid="footerDiv"> This is footer </div></div>Solution 2:
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><divid="headerDiv"> This is header </div><divid="mainDiv"><divid="contentDiv"> This is content </div><divid="footerDiv"> This is footer </div></div></body>
Post a Comment for "Fluid Sticky Footer With Flex"