使用ZURB Foundation CSS Framework创建页脚

Question

我正在使用ZURB基础CSS框架来设计一个网站.目前我正在尝试创建一个将保留在页面底部的页脚.我有以下代码的页脚,但它不会到底,而是它出现在中间.

您能否告诉我如何创建一个将保留在底部的页脚(使用ZURB基础框架)？

<div class="row">
    <div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div>
</div>

Answer 1

简单!Zurb基金会本身就是基于Compass.所以你可以使用'Compass Sticky Footer'mixin.

http://compass-style.org/reference/compass/layout/sticky_footer/

这里有一个如何做到这一点的例子:http: //compass-style.org/examples/compass/layout/sticky-footer/

但你只是去:

<div class='example'>
  <div id='layout'>
    <div id='header'>
      <h1>Sticky Footer Example</h1>
    </div>
    <p>
      This is the main content area.
    </p>
    <p>
      In this example you should pretend that the red box
      is actually the browser window.
    </p>
    <p>
      Because, being a contrived example, it's not actually sticking
      to the bottom of the page.
    </p>
    <div id='layout_footer'></div>
  </div>
  <div id='footer'>
    This is the footer area.
  </div>
</div>

在你的SCSS

@import "compass/reset.scss";
@import "compass/layout.scss";

@include sticky-footer(72px, "#layout", "#layout_footer", "#footer");

#header {
  background: #999999;
  height: 72px; }

#footer {
  background: #cccccc; }

.example {
  height: 500px;
  border: 3px solid red;
  p {
    margin: 1em 0.5em; } }

Answer 2

我会创建两个不同的页脚 - 一个用于桌面和平板电脑 - 一个用于手机.

使用Zurb的" 显示和隐藏选项",这很容易做到.您可以使用两个页脚使用的任何图形,因此任何"下载惩罚"都很小.

要为您的网站创建粘性页脚,您必须向Zurb添加一些CSS.(你可以将它添加到app.css文件,这是Zurb的额外CSS存储库)

布拉德弗罗斯特的文章(由Ed Charbeneau发布)也是一本很好的读物 - 我以前没见过.