2009-09-22 14 views
18

<div>のコンテンツを下部に貼り付けるクロスブラウザ方式はありますか? 1つの難点は、<div>に任意の高さが適用されている可能性がありますが、特定のコンテンツが常にその底にくっつくようにすることです。HTML:親ブロックの下部にアンカーブロック要素がありますか?

これは、このような古き悪しき時代で達成されていたであろう:

<table style="height: foo;"> 
    <tr><td valign="top">content</td></tr> 
    <tr><td valign="bottom">stuck to the bottom</td></tr> 
</table> 

私はこの技術に頼ることなくこれを行うことができますか?

+0

ありがとうございました。フォーマットするのを忘れました。 – recursive

答えて

48

もちろん、かなり簡単です。親divposition:relativeに設定するだけです。次に内側のアイテムを底に貼り付けるには、position:absoluteを使用してアイテムの底に貼り付けます。

<div id="parent"> 
    <div id="child"> 
    </div> 
</div> 

#parent { 
    position:relative; 
} 
#child { 
    position:absolute; 
    bottom:0; 
} 
+0

スリック。私は上と左の属性について知っていましたが、下と右を知りませんでした。 – recursive

+0

素晴らしいです。どうもありがとうございます。これは美しく動作します。さて、なぜそれは機能するのですか?親の相対位置を有効にすると、どの子も絶対配置できますか?それとももっと直感的な説明がありますか? –

+2

@ConAntonakosここでは、説明しやすくするために見つけた記事を紹介します。 http://designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning/ – tj111

関連する問題