bottom プロパティ

最終更新：2026-09-13

bottom bottom プロパティ

bottom プロパティは、配置された要素がその包含ブロックの下端から上方向にどれだけ離れているかを定義します。static 以外の配置要素にのみ適用され、通常は absolute または fixed 配置と組み合わせて要素を下端に配置したり、高さを伸ばしたりするために使用されます。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS2
状態	標準

📝 構文

bottom: auto | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	オフセットなし。
`<length> \| <percentage>`	タイプ	包含ブロックの下端からのオフセット。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
bottom	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： bottom は static 以外の配置要素にのみ影響します。position:static には効果がありません。

ヒント： パーセンテージは包含ブロックの高さを基準に計算されます。top と bottom を両方設定すると（高さを指定しない場合）、要素が伸びて垂直方向の空間を埋めます。

❓ よくある質問

Qtop と bottom の両方を設定するとどうなりますか？

A高さのない absolute または fixed 配置の場合、要素は top と bottom の間の空間を埋めるように伸び、垂直方向の適応的な伸縮が可能になります。高さが設定されている場合は top が優先され bottom は無視されます。relative 配置では top が優先されます。この手法は、高さいっぱいの背景レイヤーや、下部バーと上端揃え要素の間の柔軟な領域によく使われ、ボックスの高さを自動調整できます。

Qbottom のパーセンテージは何を基準にしますか？

Aパーセンテージは包含ブロックの高さを基準に計算されます。absolute 要素の包含ブロックは最も近い配置祖先の padding box です。fixed の場合はビューポート、relative の場合は要素の元の位置です。例えば bottom:0 は要素の下端を包含ブロックの下端に揃え、left:0; right:0 と組み合わせると要素は下端にぴったり付き、幅いっぱいに伸びます。

Qボタンやツールバーを下部に固定するにはどうすればよいですか？

Aビューポートの下部に固定するには、position:fixed; bottom:0; left:0; right:0 を使用します。スクロールしてもそのまま固定されます。本体に padding-bottom を設定して、コンテンツが下に隠れないようにしてください。コンテナ内に固定するには、親を position:relative、子を position:absolute; bottom:0; left:0; right:0 にします。どちらも下部ツールバーやアクションバーによく使われ、fixed 版はモバイルアプリのバーの基本です。

Q優先順位が高いのは bottom と top のどちらですか？

A要素に高さがある場合、top が優先され bottom は無視されます（LTR の垂直方向ではデフォルトで top が優先されるため）。高さがない場合は、top と bottom が連携して要素の高さを決定し、隙間を埋めるように伸びます。これは left と right が水平方向で機能するのと似ています。正確に制御するには、どちらか一方だけを設定し、動作を予測可能にしてください。