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。所以你可以使用'指南针粘性页脚'混合。

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＆＃34; 在上显示，隐藏选项＆＃34;这很容易做到。你可以使用这两个页脚使用的任何图形，以便任何＆＃34;下载惩罚＆＃34;很小。

要为您的网站创建粘性页脚，您必须向Zurb添加一些CSS。（您可以将其添加到app.css文件，这是Zurb的额外CSS存储库）

Brad Frost的文章（由Ed Charbeneau发布）也是一本很好的读物 - 我之前没有看到过。

Answer 3

<强> HTML：

<div id="footer">
        My Awsome Footer 2014
</div>

<强> CSS

#footer{
    height: 50px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    line-height: 50px;
    color: #aaa;
    text-align: center;
    width: 100%;
}

工作小提琴：http://jsfiddle.net/AunmM/

Answer 4

查看这个简单的粘性页脚，不需要#wrapper或固定高度！也适用于移动设备。 http://tangerineindustries.com/download/sticky_footer/

Answer 5

作为参考，以下是我使用Foundation 4.0完成此操作的方法。

给出<footer>标记。

footer {
  @include panel($panel-color, $panel-padding);
  width: 100%;
  margin: 0;
  position: fixed;
  bottom: 0;
}

Answer 6

使用基础6 ，无法开箱即用导入罗盘。并且很难找到解决方法。

与基金会合作的好解决方案可以成为这个小帮手： http://tangerineindustries.com/download/sticky_footer/

<强>临

开发人员创建此项以与ZF 6一起使用。
您只需要一个<footer>标记。
使用响应依赖灵活的页脚高度，即使使用窗口调整大小。
你不需要任何额外的#wrapper，＃pusher，＃footer等等 HTML元素。
您不需要任何额外的CSS。

<强>魂斗罗：

使用JavaScript。

Answer 7

您要做的是创建“粘滞页脚”或“固定位置页脚”。这是一个独立于Foundation的东西，而不是CSS的功能。

我建议阅读布拉德弗罗斯特的这篇文章。它标识了创建固定位置元素所涉及的基本CSS以及由此产生的兼容性问题。 http://bradfrostweb.com/blog/mobile/fixed-position/

使用ZURB Foundation CSS Framework创建页脚

7 个答案: