粘性页脚与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

回答

相关问题