1. ホーム
  2. html

[解決済み] divの内容を下に揃える方法

2022-03-17 15:03:10

質問内容

以下のようなCSSとHTMLのコードがあるとします。

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

ヘッダー部分の高さは固定ですが、ヘッダーコンテンツは変更することができます。

ヘッダーの内容をヘッダー部の下に縦に並べて、最終行のテキストがヘッダー部の下に "付く" ようにしたいのですが。

つまり、テキストが1行しかない場合は、次のようになります。

-----------------------------
| ヘッダタイトル
|
|
|
| ヘッダーの内容(結果的に1行になる)
-----------------------------

そして、3行あった場合。

-----------------------------
| ヘッダータイトル
|
| ヘッダーコンテンツ(これはとても
| 完全に
| 3行に渡っている)
-----------------------------

これをCSSで実現するにはどうしたらいいのでしょうか?

どのように解決するのですか?

相対配置+絶対配置がベストです。

#header {
  position: relative;
  min-height: 150px;
}

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

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

しかし、それで問題にぶつかるかもしれません。 私が試したときは、コンテンツの下にドロップダウン・メニューが表示される問題がありました。 見た目が悪いんです。

正直なところ、縦方向の中央揃えの問題や、アイテムの高さが固定でない場合の縦方向の配置の問題については、テーブルを使う方が簡単です。

テーブルを使わずに、このようなHTMLレイアウトは可能でしょうか?