10

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

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

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

4

10 に答える 10

41

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、コンテンツが重ならないようになります。

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

于 2011-12-13T14:36:04.270 に答える
9

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

于 2010-04-03T15:18:08.353 に答える
5

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

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

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

于 2010-04-03T15:12:58.573 に答える
3

htmlとbodyの高さを100％に設定し、min-height 100％と相対位置のコンテナーdivを挿入し、位置：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>
于 2010-04-03T15:56:01.807 に答える
2

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

編集：そのサイトはオフラインなので、これが機能する別の例です：https ://gist.github.com/XtofK/5317209およびhttps://codepen.io/griffininsight/pen/OMexrW

document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
  height: 50px; /* '.push' must be the same height as 'footer' */
}

footer {
  
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

于 2012-07-10T03:04:31.080 に答える
0

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

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

于 2010-04-03T15:16:36.253 に答える
0

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

于 2010-04-03T15:22:31.437 に答える
0

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

于 2010-04-03T16:03:29.270 に答える
0

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

于 2012-06-06T15:30:30.653 に答える
0

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

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

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

于 2015-09-22T10:17:04.277 に答える