テキストを絶対的なボトムに合わせる

Question

私はヘッダーにあるテキストを押して、各文字の一番下がdivのボトムに接触するようにしています。ほとんどの場合、divの枠線が各文字に下線を引いているかのように。どうすればこれを達成できますか？私は基本的にテキストをプッシュしようとしている私はカップルピクセルダウンしている。

Answer 1

一つの方法は、相対的にコンテナの位置を設定することで、絶対に子要素：

<div style="position:relative;height:200px;border:1px solid #ccc;"> 
    <div style="position:absolute;bottom:0px;left:0px;"> 
     I'm a bottom feeder... 
    </div> 
</div> 

EDIT

ただ、明確化のためには、私はそれのでline-heightを使用していませんテキストが新しい行に折り返された場合、正しく動作しません。

さまざまなテクニックの詳細はこちらをご覧ください。特に絶対位置対相対を用いた例を注意してください。

http://jsfiddle.net/c2tqZ/1/

Answer 2

CSS：

text{ 
    vertical-align:baseline; 
    } 

そのような何か？これを達成するための

Answer 3

http://jsfiddle.net/g835a/4/

のstyle.css

.header 
{ 
    border: 1px solid red; 
    height: 100px; 
    position: relative; 
} 

#header-content { position: absolute; bottom: 0; left: 0; } 

HTML：

<div class="header"> 
    <h1>Title</h1> 
    <div id="header-content">Some content</div> 
</div> 

Answer 4

"問題" あなたがいます遭遇はフォントによって引き起こされる。フォントは、一般に、 "j"や "g"のようなディケンダーを説明する文字の下に部屋を残します。それに応じて、下部属性の負の値を調整する必要があります。

magnum2002のフィドルで、ボトム値を0から-5に変更しても機能します。