使用 ZURB Foundation CSS 框架创建页脚答案

【问题标题】：Creating Footer using ZURB Foundation CSS Framework使用 ZURB Foundation CSS 框架创建页脚
【发布时间】：2018-03-29 08:14:01
【问题描述】：

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

您能告诉我如何创建一个将留在底部的页脚（使用 ZURB 基础框架）吗？

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

【问题讨论】：

标签： zurb-foundation

【解决方案1】：

简单！ Zurb Foundation 本身是基于 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; } }

【讨论】：

【解决方案2】：

我会创建两种不同的页脚 - 一种用于台式机和平板电脑 - 一种用于手机。

使用 Zurb 的“show on 和 hide on 选项”很容易做到。您可以让两个页脚都使用任何图形，因此任何“下载损失”都很小。

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

Brad Frost 的文章（由 Ed Charbeneau 发表）也很值得一读——我以前从未见过。

【讨论】：

【解决方案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/

【讨论】：

这在您不使用 SCSS 时会有所帮助
基金会是关于响应式设计的。这不是理想的响应。
以固定方式定位的页脚不是好的解决方案。因为如果有内容，页脚将与内容重叠。

【解决方案4】：

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

【讨论】：

非常适合我的 Foundation 6 响应式网站。扎实的工作！

【解决方案5】：

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

给定一个<footer> 标签。

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

【讨论】：

【解决方案6】：

在 foundation 6 中，指南针无法直接导入。而且很难找到解决方法。

良好的解决方案和基础可以成为这个小帮手： http://tangerineindustries.com/download/sticky_footer/

专业版：

开发人员创建了这个以与 ZF 6 一起使用。
您只需要一个<footer> 标签。
适用于响应式页脚的灵活高度，即使使用窗口大小调整。
您不需要任何额外的#wrapper、#pusher、#footer 等等 html 元素。
您不需要任何额外的 CSS。

对比：

使用 JavaScript。

【讨论】：

【解决方案7】：

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

我建议阅读 Brad Frost 的这篇文章。它确定了创建固定位置元素所涉及的基本 CSS 以及由此产生的兼容性问题。 http://bradfrostweb.com/blog/mobile/fixed-position/

【讨论】：