液粘頁腳柔性

我想在這個問題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

液粘頁腳柔性

回答

相關問題