液粘页脚柔性

我想在这个问题How to make a fluid sticky footer 液粘页脚柔性

与增加身体的答案描述在与柔性的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元素和主类contentDiv它不工作如果我添加体类mainDiv和主类contentDiv那么它几乎可以工作，但我的页脚低于headerDiv的高度，并有滚动，如何避免这种情况？

来源

2017-10-14 kosnkov

如果？

第二容器可以是Flexbox的太多，

使用相同的CSS柔性TECHNIC应用于body和#mainDiv到#mainDiv和#contentDiv，减去高度，因为flex:1;已经定型#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>

来源

2017-10-14 20:43:25

尝试使用上#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>

来源

2017-10-15 02:01:04

液粘页脚柔性

回答

相关问题