bottomプロパティ。

CSSに於けるボックスの下端位置・bottomプロパティに関する解説です。

bottomプロパティとは。

bottomプロパティは、ボックスの下端位置です。

positionプロパティにstatic値以外を指定しているセレクタに対してのみ有効です。

値の意味はpositionプロパティの値により以下のようになります。

relative

当該要素の下端を、本来表示されるべき位置の下端から指定された値だけ上方向にずらします。

absolute

コンテナブロックの下端を基準に、指定された値だけ上に当該要素の下端を配置します。

コンテナブロックとは、当該要素の上位要素で、一番近いstatic値以外の値のpositionプロパティを指定された要素ブロックです。

但し、該当する上位要素がない場合は、ページ全体がコンテナブロックとなります。

つまり、

positionプロパティでstatic値以外を指定している上位要素があれば、一番近い要素の下端を基準点とします。
positionプロパティでstatic値以外を指定している上位要素が無い場合は、ページの下端を基準点とします。

fixed

表示メディアでの下端から指定された値だけ上に当該要素の下端を配置します。

bottomプロパティの扱い。

読み飛ばす

bottomプロパティの書式。

bottomプロパティの書式は、以下のようになります。

bottom: 値

値としては、以下のものが取れます。

読み飛ばす

inherit

一番近い上位要素で指定された値を継承します。

auto

当該要素における縦方向のプロパティ(上下の余白, 枠線, パディング及び高さなど)から導き出される適切な位置を取ります(デフォルト)。

この位置の計算方法は仕様で明確に定められておりますが、かなり複雑なので簡単な説明に留めておきます。

パーセンテージ

親要素の高さを100％としたパーセンテージです(負値も有効)。

親要素に高さが定められていない場合は無効となります。

数値

基準点の下端を0とした値です(負値も有効)。

bottomプロパティの記述例。

読み飛ばす

例えば、<address>要素を、画面の左端、下端に表示したい(但し固定しない)場合は、

address {
    position: absolute;
    bottom: 0;
    left: 0;
    }

と記述します。

bottomプロパティに関する注意事項。

bottomプロパティの仕様上の注意。

実際の配置方法について。

bottomプロパティを用いた場合、以下のプロパティの値から適切な表示になるようにします。

topプロパティ
bottomプロパティ
上下の余白の幅(margin-topプロパティ及びmargin-bottomプロパティ)
上下の枠線の幅(border-top-widthプロパティ及びborder-bottom-widthプロパティ)
上下のパディングの幅(padding-topプロパティ及びpadding-bottomプロパティ)
要素の高さ(heightプロパティ)

具体的には、

t - b = m_t + m_b + b_t + b_b + p_t + p_b + h
- t = topプロパティ
- b = bottomプロパティ
- m_t 及び m_b = margin-topプロパティ及び margin-bottomプロパティ
- m_t 及び m_b = border-top-widthプロパティ及び border-bottom-widthプロパティ
- b_t 及び b_b = border-top-widthプロパティ及び border-bottom-widthプロパティ
- p_t 及び p_b = padding-topプロパティ及び padding-bottomプロパティ
- h = heightプロパティ

と言う等式を満たすように配置されます。

特に、

には、auto値を取る事が出来ますが、その場合値の代わりに代数を入れると考えられます。

例えば、margin-topプロパティがauto値であれば、上記の式は、
- t - b = x + m_b + b_t + b_b + p_t + p_b + h
と言う一元方程式になり、この式を解いた結果を反映させれば良い事になります。

しかしながら、これらのプロパティが全部auto値以外の値であった場合、上記の式の成立、すなわち適切な配置が不可能になってしまいます。

このため、仕様では、これら五つのプロパティが全部auto値以外の場合、bottomプロパティの値を無視する、すなわちauto値と見なして配置します。

尚、二つ以上のプロパティがauto値の場合、上記の式は二元以上の方程式となり解が一意的でなくなりますが、仕様では二つ以上の値がauto値の場合についても、解法を明確に規定しております。

また、

高さが確定している要素(画像などの置換要素やheightプロパティで高さが指定されている要素)
且つ、有効な値を指定されたtopプロパティも併せて指定されている

場合は、bottomプロパティは無効となります。

これは、上端と下端を指定すると、高さが合わなくなってしまうからです。

同様に、

positionプロパティで relative 値が指定されていて、
且つ有効な値を指定されたtopプロパティも併せて指定されている

場合も、ポジショニング前に要素の高さが算出されるため、bottomプロパティは無効となります。

bottomプロパティの実装上の注意。

ネットスケープ 4.xでの注意事項。

インターネットエクスプローラ 4.xでの注意事項。

ネットスケープ 4.x及びインターネットエクスプローラ 4.xにはbottomプロパティは実装されておりません。

オペラ 6.xでの注意事項。

オペラ 6.xではbottomプロパティの実装が不正確です。

WAP 2.0での注意事項。

WAP 2.0では、bottomプロパティは定義されておりません。