粘性頁腳與purecss

我想實現一個粘性頁腳，所以即使頁面內容很短，頁腳也會位於窗口的底部，但會在較長內容的頁面（like this）下推下頁腳。粘性頁腳與purecss

我在頁面上使用YUI purecss，但頭部中的純g格式不像通常那樣展開爲全寬度。

HTML

<body class="site"> 
    <div class="header"> 
     <div class="pure-g"> 
      <div class="pure-u-1 pure-u-md-1-4">One quarter</div> 
      <div class="pure-u-1 pure-u-md-3-4">Three quarters</div> 
     </div> 
    </div> 
    <div class="main"> 
     <div class="pure-g"> 
      <div class="pure-u-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div> 
     </div> 
    </div> 
    <div class="footer"> 
     <div class="pure-g"> 
      <div class="pure-u-1" style="background-color:#302c2d; color:white;">Footer</div> 
     </div> 
    </div> 
</body>

CSS

.site { 
    display: -webkit-flex; 
    display: flex; 
    min-height: 100vh; 
    -webkit-flex-direction: column; 
      flex-direction: column; 
    margin:0; 
} 
.main { 
    -webkit-flex: 1; 
      flex: 1; 
    margin:0px auto; 
    max-width:600px; 
} 
.header { 
    max-width:600px; 
    margin: 0 auto; 
}

這裏是jsfiddle

有一些額外的CSS我需要添加或更好的方式來實現粘頁腳，同時仍然能夠使用purecss模塊？

來源

2015-06-09 stickyuser

頭div只需要設置爲100％的寬度來阻止它崩潰。

.header { 
    max-width:600px; 
    width:100%; 
    margin: 0 auto; 
}

因此，YUI purecss在粘性頁腳模板中沒有問題。

來源

2015-06-15 22:33:55 stickyuser

粘性頁腳與purecss

回答

相關問題