web-dev-qa-db-ja.com

cssフッターの位置はブラウザの下部に固定されていますか？

サイトに問題があります http://artygirl.co.uk/pixie/about/ フッターをブラウザの下部に自動的に貼り付けることができないようです。私の背景の残りを表示します。 position：fixedまたはabsoluteを使用するよりも優れた解決策はありますか？

私がfirebugで行ういくつかのテストをオーバーライドする他のスタイルがあるかもしれないと思います。

よろしくジュディあなたの助けをありがとう

cssoverflowpositionfooterfixed
10
brightmist.co.uk

これは常に少し難しいので、コンテンツ領域のmin-heightを増やすことができますが、それでも誰かが本当に大きな画面を持っていても同じことがわかります。

誰かが巨大なビューポートを持っているが、それでもエレガントとは言えない場合は、JavaScriptを少し使用してmin-heightを増やすことができます。これに対するCSSのみの解決策があるかどうかはわかりません。

上記のコードを試してみたい場合は、ここに投稿しました： jQueryでスクロールバーの存在を検出するのはまだ難しいですか？ 役に立つかもしれません。

5
Steve

[〜＃〜] css [〜＃〜]：

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

[〜＃〜] html [〜＃〜]：

<div class="podbar">
    Put your footer here
</div>

これにより、常にページの下部に表示され、すべてをオーバーレイするスティッキーが作成されます。フッターの高さに等しいメインコンテナdivの下部にマージン/パディングを追加するだけです+5pxなので、コンテンツはオーバーレイされません。

私がテストしたほとんどすべてのブラウザで動作します。

38
Boondog

以前、この記事の手法を使用しました： CSSレイアウト：高さ100％、ヘッダーとフッター付き 。 HTMLに追加のマークアップが必要です。

9
roryf

Htmlとbodyの高さを100％に設定し、min-height 100％と相対位置のコンテナーdivを挿入し、position：absolute、bottom：0;でフッターをネストします。

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>
3
digitaldreamer

ここに例と説明があります http://ryanfait.com/sticky-footer/

2
Jaime Hablutzel

Sass に Compass ライブラリを使用する場合は、別のオプションもあります。 Compassの sticky-footer mixin （ demo ）を使用できます。フッターの高さが固定されていること、およびHTMLが特定の一般的な構造を持っていることが必要です。

0
Rory O'Kane

position：absoluteを使用しないでくださいposition：relativeを代わりに使用してください。

.footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

position：absoluteは画面の下部に固定されますが、positionrelativeは他のdivを無視しないため、ページ全体の下部に留まります。

0
Koen

min-heightに#contentを設定できます。これにより、フッターがブラウザの下部に固定されることはありませんが、一定量の背景を常に表示できるようになります。

別の方法として、JavaScriptを使用して、ブラウザウィンドウの高さを決定し、min-heightの#contentを計算して、JavaScriptを使用して適用することができます。これにより、フッターが常に正しい場所に配置されます。

0
Josh

私はそれを理解しました。 Htmlには、背景に白を表すcssプロパティがありました。

0
brightmist.co.uk

ページの内容が変動するため、私は常にページごとのフッターを好みます。フッターには5emの上部マージンを使用します。ほとんどの場合、ページで発生する可能性のあるコンテンツの高さはわかっています。

0
pokrate