web-dev-qa-db-ja.com

スクロールバーがある場合でもdivを常にページのコンテンツの一番下に配置する

CSSでDivをページの一番下に移動

そのリンクを見てください、私は反対を望んでいます：コンテンツがスクロールバーにオーバーフローするとき、私は私のフッターが常にページの一番下のcompleteに​​なるようにしたいです。

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

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

しかし、ビューポートの一番下に移動するだけで、下にスクロールしてもそこに表示されたままになるので、一番下には表示されません。

画像： Examlple

明確にされないなら申し訳ありません、私はそれがすべての内容の実際の底にあるためにだけそれが修正されることを望まない。

csspositioningcss-positionfooter
230
H Bellamy

これはまさにposition: fixedが以下のために設計されたものです。

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

これがフィドルです： http://jsfiddle.net/uw8f9/ /

488
Joseph Silber

残念ながら、これには少し余分なHTMLを追加してCSSの一部を別の部分に依存させるしかありません。

HTML

まず、header、footer、および#bodyを#holder divにラップする必要があります。

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

CSS

次に、height: 100%をhtmlおよびbody（実際の本文、#body divではない）に設定して、子要素の最小の高さをパーセントで設定できるようにします。

min-height: 100% divに#holderを設定して、画面の内容を埋め、position: absoluteを使用して#holder divの下部にフッターを配置します。

残念ながら、footerがどのコンテンツの上にも収まらないようにするには、footerと同じ高さのpadding-bottom divに#bodyを適用する必要があります。

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/ /

177
My Head Hurts

上記の例は私のためにバグ（どこかエラー）があるようにちょうど別の解決策のために解決しました。選択した答えからの変化。

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までスクロールダウンできます

12
Anonymous

私はそれが「他の答えに答える」ためにこれを使用しないと言うことを理解していますが、残念ながら私は適切な答えにコメントを追加するのに十分な担当者を持っていません。

'My Head Hurts'からの回答でasp.netに問題がある場合は、これを機能させるためにはHTMLとBODYのタグと同様に生成されたFORMタグにも 'height：100％'を追加する必要があります。

5
Ian

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

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

可能であればコメントしますが、まだ権限がないので、回答としてヒントを投稿します。一部のAndroidデバイスでの予期しない動作のためです。

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

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

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

3
Tarciso Junior

これは、ビューポートの高さからフッターの高さを引いた値に最小の高さを設定するだけの、直観的な解決策です。

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

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

私はメインのコンテンツをすべて追加のdivタグ（id = "outer"）に入れることで同様の問題を解決しました。それから、id = "footer"のdivタグをこの最後の "outer" divタグの外側に移動しました。 CSSを使用して "outer"の高さを指定し、 "footer"の幅と高さを指定しました。私はCSSを使って "footer"の左マージンと右マージンをautoに指定しました。その結果、フッターは私のページの一番下にしっかりと収まり、ページとともにスクロールします（ただし、それは「外側の」divの内側に表示されますが、メインの「content」divの外側には表示されます欲しいところ.

1
David B

固定の高さのフッター（712pxなど）がある場合は、jsを使ってこれを行うことができます。

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
1
George Carlin

私はただ加えたいだけです - 他の答えのほとんどは私のためにうまくいきました。しかし、それらを機能させるのに長い時間がかかりました！

これは、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がもっとネストされている場合（それは全ページの要素にすぎないか、特定の列の中など）、すべての要素を含む _もdivにheight: 100%を設定する必要があります。 。そうでなければ、身長に関する情報は "body"と "holder"の間で失われます。

例えば。次のコードでは、すべてのdivに "full height"クラスを追加して、高さが私たちのheader/body/footer要素に達するようにしています。

<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%;
}

これで私の問題は解決しました！

1
Tim L