將透明div層放置在另一個具有100％高度的div層之上（粘性頁腳！）？

Question

HTML：

<div id="mainWrapper"> 
    <div id="headerContainer">Header</div> 
     <div class="contentPage"> 
      <div id="content"> 
         <p>Content Page</p> 
         <p>Content Page</p> 
      </div> 
     </div> 
    <div id="footerContainer">Footer</div> 
</div> 

CSS：

body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#mainWrapper { 
    margin: 0 auto; 
    min-height: 100%; 
    position: relative; 
    width: 100%; 
    background: red; 
} 

#headerContainer { 
    background: none repeat scroll 0 0 #4ED0AA; 
    height: auto; 
    width: 100%; 
} 

.contentPage { 
    background: url("http://www.sammt.net/Baum.jpg") repeat-y scroll 0 0/100% auto rgba(0, 0, 0, 0); 
    padding-bottom: 120px; 
    width: 100%; 
} 

#content { 
    background: none repeat scroll 0 0 #6288A1; 
    opacity: 0.8; 
    padding: 20px 20%; 
} 

#footerContainer { 
    background-color: #4ED0AA; 
    bottom: 0; 
    height: 120px; 
    position: absolute; 
    width: 100%; 
} 

結果：

應該發生什麼： 與背景圖像的層以及與層藍色透明背景應該直到頁腳開始。問題是粘頁腳我想......

貌似是：

Answer 1

只有兩段頁面Here is a demo，並another demo有大量的內容進行滾動。

我已經做了佈局有點重排，所以現在看起來是這樣的：

<div id="transparent-bg"></div> 

<div id="mainWrapper"> 
    <div id="headerContainer">Header</div> 

    <div class="contentPage"> 

     <div id="content"> 
      <p>Content Page</p> 
      <p>Content Page</p> 
     </div> 
    </div> 
</div> 
<div id="footerContainer"> 
    Footer 
</div> 

基本上，背景圖像和透明色被呈現在一個單獨的div，因爲這是造成一些呈現問題，並且footer已成爲mainWrapper之後的兄弟姐妹。

的CSS代碼如下：

html { 
    height:100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#transparent-bg { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    background: url("http://www.sammt.net/Baum.jpg") no-repeat; 
    background-size:cover; 
    z-index:-1; 
} 

#transparent-bg:after { 
    background:#6288A1; 
    opacity:.8; 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    content:''; 
} 

#mainWrapper { 
    margin: 0 auto -120px; 
    width: 100%; 
    min-height:100%; 
    height: auto !important; 
} 

#headerContainer { 
    background: #4ED0AA; 
    height: auto; 
    width: 100%; 
} 

.contentPage { 
    width: 100%; 
    margin: 0 auto -120px; 
} 

#content { 
    padding: 20px 20% 120px; 
    box-sizing: border-box; 
} 

#footerContainer { 
    background-color: #4ED0AA; 
    height: 120px; 
    width: 100%; 
} 

我希望這能解決您的問題！

Answer 2

嘗試將background-size:cover在藍色透明背景。

Answer 3

試試這個代碼

#content { 
    background: none repeat scroll 0 0 #6288A1; 
    opacity: 0.8; 
    padding: 20px 20%; 
    height: 100%; 
} 

Live Demo

Answer 4

// text write your css code 

#mainWrapper { 
    background: none repeat scroll 0 0 #FF0000; 
    height: 1000px; 
    margin: 0 auto; 
    position: relative; 
    width: 100%; 
    } 
#headerContainer { 
    background: none repeat scroll 0 0 #4ED0AA; 
    width: 100%; 
} 
.contentPage { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 100%; 
} 
#content { 
    background: url("http://www.sammt.net/Baum.jpg") 
    repeat-y scroll 0 0/100% auto rgba(0, 0,0,0); 
    bottom: 0; 
    left: 0; 
    opacity: 0.8; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
#footerContainer { 
    background-color: #4ED0AA; 
    height: 120px; 
    width: 100%; 
}