粘性頁腳混淆了部分的高度

我試圖在具有固定高度的部分的網頁中創建粘性頁腳。當我嘗試這個trick，我得到了我的粘腳，但部分沒有顯示他們的固定高度。我該如何解決？粘性頁腳混淆了部分的高度

ps：當我將最小高度更改爲高度時，它修復了部分高度的問題，但是我沒有粘住頁腳。

html,body { 
 
width:100%; 
 
height:100%; 
 
position:relative; 
 
} 
 

 
.wrapper { 
 
position:relative; 
 
width:100%; 
 
min-height:100%; 
 
margin-bottom:200px; 
 
} 
 

 
.section1{ 
 
width:100%; 
 
height:100%; 
 
background-color:grey; 
 
} 
 

 
.section2{ 
 
width:100%; 
 
height:50%; 
 
background-color:orange; 
 
} 
 

 
.wrapper:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .wrapper:after { 
 
height:200px ; 
 
} 
 

 
.site-footer { 
 
    background-color:red ; 
 
}

<main class="wrapper"> 
 
<section class="section1"> 
 
<h2>header1</h2> 
 
</section> 
 
<section class="section2"><h2>header2</h2></section> 
 
</main> 
 
<footer class="site-footer"> 
 
<p>footer</p> 
 
</footer>

來源

2017-03-06 Ndx

你有什麼想要實現的草圖 – mbeso

我正嘗試創建一個單頁的網站l在trello.com中訪問。我希望我的第一部分是全屏寬/高，我的部分部分的高度爲50％左右。如果我不使用粘性高度技巧，它可以通過將html，body，wrapper的高度設置爲100％，然後爲一個部分選擇一個高度。現在我正在使用粘滯腳註技巧，它不顯示我設置的高度。 – Ndx

相反百分比值的，則可以使用「VH」值的部分（視口高度的1vh = 1％）：

html,body { 
 
width:100%; 
 
height:100%; 
 
position:relative; 
 
} 
 

 
.wrapper { 
 
position:relative; 
 
width:100%; 
 
min-height:100%; 
 
margin-bottom:200px; 
 
} 
 

 
.section1{ 
 
width:100%; 
 
height:100vh; 
 
background-color:grey; 
 
} 
 

 
.section2{ 
 
width:100%; 
 
height:50vh; 
 
background-color:orange; 
 
} 
 

 
.wrapper:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .wrapper:after { 
 
height:200px ; 
 
} 
 

 
.site-footer { 
 
    background-color:red ; 
 
}

<main class="wrapper"> 
 
<section class="section1"> 
 
<h2>header1</h2> 
 
</section> 
 
<section class="section2"><h2>header2</h2></section> 
 
</main> 
 
<footer class="site-footer"> 
 
<p>footer</p> 
 
</footer>

來源

2017-03-06 22:24:52 Johannes

謝謝！有效。 – Ndx

粘性頁腳混淆了部分的高度

回答

相關問題