柔韧的流体粘性页脚 [英] Fluid sticky footer with flex
问题描述
我正在尝试按照此问题中的说明在flex的底部放置脚注如何使页脚变稠
I am trying to make footer at the bootom with flex as described in this question 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;
}
如果页眉，主目录和页脚一个接一个并且都在里面，则可以正常工作正文
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>
然后，如果我在 body 中添加body类html元素和主类到 contentDiv ，如果我将主体类添加到 mainDiv 和main，则
不起作用类到 contentDiv ，那么它几乎可以正常工作，但是我的页脚比 headerDiv 的高度低，并且有滚动条，如何避免那个？
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 ?
推荐答案
如果怎么办？
What if ?
第二个容器也可以是flexbox，
the second container can be a flexbox too ,
使用相同CSS flex技术适用于 body 和 #mainDiv 到 #mainDiv 和 #contentDiv ，减去 flex：1以来的高度； 已经调整了 #mainDiv 。
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>
这篇关于柔韧的流体粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
