17

ZURBFoundationCSSフレームワークを使用してWebサイトを設計しています。現在、ページの下部に表示されるフッターを作成しようとしています。フッターには次のコードがありますが、下部には表示されず、中央に表示されます。

一番下にとどまるフッター（ZURBファンデーションフレームワークを使用）を作成する方法を教えてください。

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

7 に答える 7

16

単純！ZurbFoundation自体はCompassに基づいています。したがって、「CompassStickyFooter」ミックスインを使用できます。

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; } }
于 2012-11-29T07:28:20.817 に答える
13

デスクトップとタブレット用と電話用の2つの異なるフッターを作成します。

Zurbの「オプションの表示と非表示」を使用すると、非常に簡単に実行できます。両方のフッターで任意のグラフィックを使用できるため、「ダウンロードペナルティ」はわずかです。

Webサイトのスティッキーフッターを作成するには、CSSをZurbに追加する必要があります。（これをapp.cssファイルに追加できます。app.cssファイルは、追加のCSS用のZurbのリポジトリです）

また、Brad Frostの記事（Ed Charbeneauによる投稿）は素晴らしい読み物です-私はそれを前に見たことがありませんでした。

于 2012-11-04T01:01:24.913 に答える
4

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/

于 2014-01-16T07:42:11.367 に答える
2

基礎用のこのシンプルな粘着性のあるフッターをチェックしてください。＃ラッパーや固定の高さは必要ありません。モバイルでも動作します。http://tangerineindustries.com/download/sticky_footer/

于 2013-01-22T19:25:30.650 に答える
2

参考までに、Foundation4.0を使用してこれを実現した方法を次に示します。

タグを指定し<footer>ます。

footer {
  @include panel($panel-color, $panel-padding);
  width: 100%;
  margin: 0;
  position: fixed;
  bottom: 0;
}
于 2013-10-24T22:07:58.743 に答える
1

Foundation 6では、コンパスをすぐにインポートすることはできません。そして、回避策を見つけるのは難しいです。

基礎と一緒の良い解決策はこの小さなヘルパーになることができます：http： //tangerineindustries.com/download/sticky_footer/

プロ：

  1. 開発者は、ZF6と一緒に使用するためにこれを作成しました。
  2. 必要なのは<footer>タグだけです。
  3. ウィンドウのサイズを変更する場合でも、フッターの柔軟な高さに応じてレスポンシブで動作します。
  4. html要素が何であれ、余分な＃wrapper、＃pusher、＃footerは必要ありません。
  5. 追加のCSSは必要ありません。

対照：

  1. JavaScriptを使用します。
于 2016-01-03T02:48:27.757 に答える
0

あなたがしようとしているのは、「スティッキーフッター」または「固定位置フッター」を作成することです。これはFoundationから独立したものであり、代わりに一般的なCSSの機能です。

ブラッド・フロストによるこの記事を読むことをお勧めします。これは、固定位置要素の作成に関連する基本的なCSSと、それによって発生する互換性の問題を識別します。 http://bradfrostweb.com/blog/mobile/fixed-position/

于 2012-11-02T12:59:07.417 に答える