スクロールバーがある場合でも、divを常にページのコンテンツの下部に留める

261

CSSはDivをページの下部にプッシュします

そのリンクを見てください、私は反対が欲しいです：コンテンツがスクロールバーにオーバーフローするとき、私はフッターが常にスタックオーバーフローのようにページの完全な下部にあることを望みます。

私はdiv id="footer"とこのCSS を持っています：

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

ただし、ビューポートの下部に移動するだけで、下にスクロールしてもそのまま表示されるため、下部に表示されなくなります。

画像： 例

明確にされていない場合は申し訳ありませんが、私はそれがすべてのコンテンツの実際の下部にあるためにのみ修正されることを望んでいません。

css  positioning  css-position  footer 
— Hベラミー
ソース
1
試してみてくださいposition:fixed。ただし、これが最善の方法ではありません
— redDevil
位置を試してください：身体に相対的です。
1
あなたはあなたを閉じませんでした。位置の後：絶対。それ以外の場合は完全に機能します！
— AlexHighHigh 2016年

回答:

545

これは、正確に以下のposition: fixedために設計されたものです。

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

ここにフィドルがあります：http : //jsfiddle.net/uw8f9/

— ジョセフ・シルバー
ソース
65
このソリューションは、ケースの90％には適していません。ウィンドウのサイズを変更すると、フッターは他のコンテンツをオーバーレイし、コンテンツの最後で停止しません
— vsync
10
@arothは、2つのまったく異なるソリューションであるためです。このソリューションは、フッターを常に画面の視覚領域の下部に保持します。代替ソリューションは、どちらが大きいかに応じて、画面下部またはページ下部のいずれかにフッターを保持します。これは、質問者が要求したものでした。
— 私の頭が2012年
6
@MyHeadHurts-あなたは絶対的に正しいです。答えた後、これはOPが必要とするものではないことに気付きましたが、単純な固定フッターを探している人々のためにここに残しました。コメント（および投票）から、多くの人々がこの基本的なCSS機能に苦労しているようです。
— ジョセフ・シルバー
1
@MyHeadHurts-十分に公平ですが、私のお金はどちらも基本的には同じです。fixed十分なコンテンツがある場合、コンテンツはフッターの下にスクロールします。それで十分です。もちろん、stackoverflowにあるような非常に大きなフッターがこのfixedアプローチではうまく機能しないことはわかりますが、基本的な1行のフッターでは、このアプローチは私の意見ではうまく機能します。
— 12
@aroth同意します。これは良い解決策であり、すべてはあなたが望むものに依存します。なぜ1つのソリューションが他のソリューションよりも複雑であるかを指摘していました->それらは同じことをしません。
— 私の頭が2012年
188

残念ながら、少しHTMLを追加してCSSの一部を別のCSSに依存させることなくして、これを行うことはできません。

HTML

まず、あなたはあなたのラップする必要があるheader、footerと#bodyに#holderDIV：

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

次にheight: 100%、htmland body（#bodydiv ではなく実際の本文）に設定して、最小の高さを子要素のパーセンテージとして設定できるようにします。

画面のコンテンツを埋めるためにdivを設定min-height: 100%し、#holderdiv position: absoluteの下部にフッターを配置するために使用し#holderます。

残念ながら、がコンテンツの上に配置されないようにするには、と同じ高さのdiv に適用padding-bottomする必要があります。#bodyfooterfooter

html,body{
    height: 100%
}

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

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

作業例、短い本文：http : //jsfiddle.net/ELUGc/

作業例、長い本文：http : //jsfiddle.net/ELUGc/1/

— 頭が痛い
ソース
なぜwidth：100％なのかわかりません。必須
— 2013年
4
@sTACKoVERFLOW- width または両方 leftを指定しない場合right、値はに設定されauto、要素はその内容に合わせて折り返されます。指定width: 100% または left: 0とright:0絶対位置要素はコンテナ要素の全幅を取ることを保証します
— 私の頭が痛い
私は同様の動作を探していましたが、私の場合、＃body divは "float：left"のようにフロートされています。短いボディの例は機能しますが、長いボディの例は機能しません。#body divでfloatを使用して望ましい動作を得る方法についての提案。
— Jatin、2014
@イアンは、彼がコメントするのに十分な担当者を持っていなかったので、答えで言った： 'My Head Hurts'からの答えでasp.netに問題がある場合-メインに 'height：100％'を追加する必要がありますこれが機能するために、FORMタグとHTMLおよびBODYタグを生成しました。
— msouth
ボディ全体ではなくdiv内でこれを機能させる場合は、要素を含むすべての包含要素で指定height=100%するようにしてください<form>。
— Ben Caine、
13

上記の例は私にバグ（どこかエラー）があるので、別の解決策のためにうまくいきました。選択した回答からのバリエーション。

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

HTMLレイアウト用

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

まあこの方法は古いブラウザをサポートしていませんが、古いブラウザがフッターを表示するために30pxスクロールダウンすることは許容されます

— 匿名の
ソース
5

これを「他の回答への応答」に使用しないように言っているのはわかっていますが、残念ながら適切な回答（！）にコメントを追加するのに十分な担当者がいません...

「My Head Hurts」からの回答でasp.netに問題がある場合-これを機能させるには、メインの生成されたFORMタグとHTMLおよびBODYタグに「height：100％」を追加する必要があります。

— イアン
ソース
4

あなたはあなたを閉じませんでした。位置の後：絶対。そうでなければ、上記のコードは完全に機能します！

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
— AlexHighHigh
ソース
3

できればコメントしますが、権限はまだないので、一部のAndroidデバイスで予期しない動作が発生した場合のヒントを回答として投稿します。

位置：修正は、Android 2.1から2.3でのみ、次のメタタグを使用して機能します。 

<meta name="viewport" content="width=device-width, user-scalable=no">.

http://caniuse.com/#search=positionを参照してください

— タルシソジュニア
ソース
2

これは、最小の高さをビューポートの高さからフッターの高さを差し引いたものに設定するviewportコマンドを使用した直感的なソリューションです。

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
— Obromios
ソース
1

すべてのメインコンテンツを追加のdivタグ（id = "outer"）で囲むことにより、同様の問題を解決しました。次に、id = "footer"を含むdivタグを、この最後の「外部」divタグの外に移動しました。CSSを使用して「外側」の高さを指定し、「フッター」の幅と高さを指定しました。CSSを使用して、 "footer"のmargin-leftおよびmargin-rightをautoとして指定しました。その結果、フッターはページの下部にしっかりと固定され、ページとともにスクロールします（ただし、「outer」divの内側には表示されますが、メインの「content」divの外側には表示されますが、奇妙に見えますが、私が欲しいところ）。

— デビッドB
ソース
1

追加したいのですが、他のほとんどの回答はうまくいきました。しかし、それらを動作させるには長い時間がかかりました！

これは、設定height: 100%が親divの高さのみを取得するためです。

したがって、HTML全体（本文内）が次のようになっているとします。

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

次に、以下で問題ありません。

html,body{
    height: 100%
}

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

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

...「ホルダー」は「ボディ」から直接高さを取得するため。

私の頭が痛い人への賞賛、その答えは私が結局仕事に就くことになったものでした！

しかしながら。HTMLがさらにネストされている場合（ページ全体の要素のみであったり、特定の列内にあるためなど）、すべての包含要素height: 100%がdivにも設定されていることを確認する必要があります。そうしないと、「ボディ」と「ホルダー」の間で高さの情報が失われます。

たとえば、次の例では、すべてのdivに「フルハイト」クラスを追加して、ヘッダー/ボディ/フッターエレメントまでの高さを確認しています。

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

そしてCSSでフルハイトクラスに高さを設定することを忘れないでください：

#full-height{
    height: 100%;
}

これで問題が解決しました！

— ティム・L
ソース
0

高さが固定されたフッター（たとえば712px）がある場合は、次のようにjsでこれを行うことができます。

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
— ジョージ・カーリン
ソース
0 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
— プラヴィーンクンドゥ
ソース
他の人がこの回答を理解できるように、回答に問題の内容とこのスニペットがどのように解決するかを説明してください
— FZs
-2

固定ボトムブートストラップクラスを使用する

<div id="footer" class="fixed-bottom w-100">
— ゴサム・スーリヤラジ
ソース
OPがブートストラップを使用していることを示すものはありません。
— TylerH
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.