0

このフォーラムに投稿する前に、答えが見つかりませんでした。

ページの下部にフッターを配置する必要がありますが、コンテンツによって押し下げられるほど柔軟である必要があります。

次のことを試してみましたが、必要な場所に配置されますが、下にあるコンテンツと重なっています。

footer {
    position: fixed; 
    bottom: 0
}

フッターの上のすべてのdivの高さを計算することでjQueryで修正できますが、CSSだけでそれを達成する方法があるかどうか疑問に思っていました.

4

3 に答える 3

1

position:fixedをに変更しrelativeます。

それがどのように機能するかを確認できるように、jsfiddle を作成しました。

jsfiddle

jsfiddle アバブ ザ フォールド

私はjquery/javascriptの神ではありませんが、ブラウザの最大高さを見つけるためのこの役立つリンクを見つけました。このコードを使用してブラウザーの高さを確認し、おそらく if ステートメントになると思います。footerまたはdivがこの高さを超えている場合は、.css('position', 'absolute');

ブラウザの高さ

これも、ポートフォリオを作っていたときから頭に浮かびました。フッターの高さが設定されていない場合は、タグに同じ高さを追加するbackgroundだけhtmlですCSS

html {
   background: #ff7200;
}

footer{
   background: #ff7200;
}

HTMLフッターjsfiddle

私のポートフォリオ(ポートフォリオを見る場合は、コンソールに移動し、ホームページからいくつかのタブを削除して、それがどのように機能するかを確認してください。)

この効果は、タグfooter内の要素または最後の要素の後にある空白を埋めます。body高さを設定していないので、これはまさにあなたが望むものかもしれないと思います。

于 2013-09-13T15:02:36.907 に答える
0

I would recommend you to use the Sticky Footer model as is it what you almost need.

The thing is that you can't predict your footer height. Well, you will need to use this small piece of jQuery code on DOM ready :

var footer = $("#footer");
var footerHeight = footer.outerHeight();
footer.css('margin-top', '-'+footerHeight+'px');

var main = $("#main");
main.css('padding-bottom', footerHeight+'px');

What is simply does is to change dynamically the negative margin-top of the #footer and the padding-bottom of the #main corresponding to the #footer height.

The Demo

于 2013-09-13T15:22:15.880 に答える
0

HTML:

<body>
        <div class="wrapper">
            Your website content here.
            <div class="push"></div>
        </div>
        <div class="footer">
            Footer goes here
        </div>
</body>

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; //negative margin must be the same as your footer/push height
}
.footer, .push {
height: 4em; //height of your footer
}

ここで利用可能なより詳細な説明：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

編集: jQuery を使用した動的高さ計算のフィドル: http://jsfiddle.net/KyVpc/

于 2013-09-13T15:05:14.683 に答える