web-dev-qa-db-ja.com

divをフロートさせる方法は？

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

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

position: relative;
bottom: 0px;

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

csshtmlalignmentpositioning
19
Prakash GPz

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>
24
Thomas C. Rodriguez

footer divは次のいずれかである必要があります。

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

  • position:fixed;bottom:0;;これは、より頻繁にstickyフッターに使用されます。これにより、フッターが画面のbottom:0に配置されます。スクロールする場所に関係なく、表示されるのはあなたが得るものです（スクロール中は動きません）

  • position:relative;bottom:0;;使用できますが、それはその兄弟に相対的です（つまり、content divが最下部にプッシュされない限り、そこに移動しません）、または、コンテナが相対的な場合それは動作するかもしれません（しかしplease私が間違っているなら私を修正してください）。

あなたの質問に基づいて：i want the footer div to stick at the bottom of outer wrapper.フッターにabsoluteポジショニングを使用したいようです。これにより、常にフッターがコンテナの下部に固定されます。

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

一部...チュートリアル を確認してください。最も重要なのは、 ごちゃごちゃにして、実験してみてください！

jsfiddle にすると、達成しようとしているものがより明確になります。がんばろう！

11
d-_-b

ラッパーの位置を相対的で、内側の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/

6
phnkha
<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>
2
Jeffrey

コンテンツの下にフッターを表示するには、クリアを使用します。

単に-

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

これにより、ヘッダーが上になり、フッターがフロートされた要素の下に落ちるようになります。

2
Drew Dahlman

[[〜＃〜] updated [〜＃〜]]

これは、alwaysがフッターを下に固定するCSSです。

*[〜＃〜] demo [〜＃〜]*

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;
}
0
Cdeez