blocks|key|445369|text|您要做的是创建一个“粘性页脚”或“固定位置页脚”。这是独立于Foundation的东西，而不是CSS的一般功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|445370|我建议你读一下布拉德·弗罗斯特的这篇文章。它确定了创建固定位置元素所涉及的基本CSS以及由此产生的兼容性问题。http://bradfrostweb.com/blog/mobile/fixed-position/|offset|length|445371|entityMap|0|LINK|mutability|MUTABLE|url|http://bradfrostweb.com/blog/mobile/fixed-position/^0|0|1J|1F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>What you are trying to do is create a "Sticky Footer" or "Fixed Position Footer". This is something which is independent of Foundation and instead is a function of CSS in general.</p>

<p>I would suggest reading this article by Brad Frost. It identifies the basic CSS involved in creating a Fixed Position element and the compatibility issues that arise from doing so.
<a href="http://bradfrostweb.com/blog/mobile/fixed-position/" rel="nofollow">http://bradfrostweb.com/blog/mobile/fixed-position/</a></p>


blocks|key|445393|text|很简单！Zurb+Foundation本身就是基于Compass的。因此，您可以使用“指南针粘性页脚”混合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|445394|http://compass-style.org/reference/compass/layout/sticky_footer/|offset|length|445395|这里有一个如何做的例子：http://compass-style.org/examples/compass/layout/sticky-footer/|445396|但你只需说：|445397|<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>|code-block|syntax|javascript|445398|在你的SCSS里|445399|@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;+}+}|445400|entityMap|0|LINK|mutability|MUTABLE|url|1|http://compass-style.org/examples/compass/layout/sticky-footer/^0|0|0|1S|0|0|C|1R|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|H|3|I|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]|Z|$5|V|W|X|A|$Y|10]]]]

<p>Simple! Zurb Foundation is itself based on Compass. So you can use the 'Compass Sticky Footer' mixin.</p>

<p><a href="http://compass-style.org/reference/compass/layout/sticky_footer/">http://compass-style.org/reference/compass/layout/sticky_footer/</a></p>

<p>There is an example of how to do it here:
<a href="http://compass-style.org/examples/compass/layout/sticky-footer/">http://compass-style.org/examples/compass/layout/sticky-footer/</a></p>

<p>But you just go:</p>

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

<p>And in you SCSS</p>

<pre><code>@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; } }
</code></pre>


blocks|key|445408|text|看看这个简单的粘性页脚作为基础，不需要#包装器或固定高度！在移动端也是如此。http://tangerineindustries.com/download/sticky_footer/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|445409|entityMap|0|LINK|mutability|MUTABLE|url|http://tangerineindustries.com/download/sticky_footer/^0|12|1I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Check out this simple sticky footer for foundation, no need for a #wrapper or a fixed height! Works in mobile as well. <a href="http://tangerineindustries.com/download/sticky_footer/" rel="nofollow">http://tangerineindustries.com/download/sticky_footer/</a></p>


blocks|key|227354|text|作为参考，下面是我如何使用Foundation+4.0完成这项工作的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|227355|给出一个<footer>标签。|offset|length|style|CODE|227356|footer+{
++@include+panel($panel-color,+$panel-padding);
++width:+100%25;
++margin:+0;
++position:+fixed;
++bottom:+0;
}|code-block|syntax|javascript|227357|entityMap^0|0|4|8|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>For reference, here's how I accomplished this using Foundation 4.0.</p>

<p>Given a <code>&lt;footer&gt;</code> tag.</p>

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


<p>I am using ZURB foundation CSS framework to design a website. Currently I am trying to create a footer that will stay at the bottom of my page. I have the following code for the footer but its not going to the bottom, rather its showing up in the middle.</p>

<p>Could you please tell me how to create a footer (using ZURB foundation framework) that will stay at the bottom?</p>

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


Creating Footer using ZURB Foundation CSS Framework

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用ZURB基金会CSS框架来设计一个网站。目前，我正在尝试创建一个页脚，将留在我的页面底部。我有下面的页脚代码，但它不会显示在底部，而是显示在中间。你能告诉我如何创建一个页脚(使用ZURB基础框架)，将留在底部？<div class="row">    <div class="twelve columns" s...

问使用ZURB Foundation CSS框架创建页脚
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ZURB Foundation CSS框架创建页脚EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ZURB Foundation CSS框架创建页脚
EN