20

私は4つのdivを持っています。1つは外部ラッパーで、他の3つはそれぞれヘッダー、コンテンツ、フッターです。すべて同じ（固定）幅です。ただし、外部ラッパーの高さとコンテンツdivは可変です。

これらのサイズに関係なく、フッターdivを外側のラッパーの下部に貼り付けたいと思います。次のCSSを使ってみました

position: relative;
bottom: 0px;

しかし、それはうまくいきませんでした。誰かが解決策を知っていますか？

4

6 に答える 6

27

divを一番下に揃えるには、最初に親divの位置を相対にし、次に必要なdivの位置を絶対にし、bottomプロパティをゼロに設定する必要があります。

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>

于 2013-05-04T17:07:38.490 に答える
13

フッターdivは次のいずれかである必要があります。

  • position:absolute;bottom:0;; これにより、コンテナがコンテナの一番下にプッシュされますが、コンテナを超えて下にスクロールすると、フッターも一緒にスクロールします。

  • position:fixed;bottom:0;; これは、スティッキーフッターによく使用されます。これにより、フッターがbottom:0画面の上部に配置されます。したがって、どこをスクロールしても、表示されるのは取得したものです（スクロール中に移動することはありません）

  • position:relative;bottom:0;; 使用できますが、兄弟に相対的です（つまり、コンテンツdivがそれを下にプッシュしない限り、そこには移動しません）、または、コンテナーが相対的である場合は機能する可能性があります（ただし、修正してください）私が間違っている場合は私）。

あなたの質問に基づいて：あなたはフッターにポジショニングi want the footer div to stick at the bottom of outer wrapper.を使用したいようですabsolute、それでそれは常にそのコンテナの底にくっつくでしょう....

ユーザーがどこにスクロールしてもフッターを画面の下部に表示したい場合は、配置することをお勧めfixedします。

間違いなくいくつかの...チュートリアルをチェックしてください、そして最も重要なのは、いじって自分で実験してください！

あなたは私たちをjsfiddleにすることができ、多分それはあなたが達成しようとしていることにもっと光を当てるでしょう。幸運を！

于 2012-12-28T04:45:10.523 に答える
7

ラッパーの位置を相対的にし、内側のDivの位置を絶対にすることができます。

<div style="position: relative; height: 200px">
    <div style="position: absolute; top: 0px; height: 20px; background-color:red">
        header
    </div>

    <div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
        content
    </div>

    <div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
        footer
    </div>
</div>

これを試してくださいhttp://jsfiddle.net/YAaA3/

于 2012-12-28T04:15:55.377 に答える
2

クリアを使用して、コンテンツの下にフッターを配置します。

単に-

#header {
 clear:both;
}
#footer {
 clear: both;
}

これにより、ヘッダーが上になり、フッターがフロート要素の下に配置されます。

于 2012-12-28T04:34:36.217 に答える
2 
<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>
于 2013-05-04T18:24:40.387 に答える
0

[更新]

これCSSが常にフッターを下に貼り付けるものです。

*デモ*

CSS-

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#ou {
    position:relative;
    background-color:grey;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:400px;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#he
{
    height:30px;
    background-color:red;
}
#fo{
    background-color:yellow;
    height: 30px; /* .push must be the same height as .footer */
    position:relative;
    width:400px;
    margin:0 auto;
}
于 2012-12-28T04:33:10.337 に答える