[解決済み] 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>
しかし、それで問題にぶつかるかもしれません。 私が試したときは、コンテンツの下にドロップダウン・メニューが表示される問題がありました。 見た目が悪いんです。
正直なところ、縦方向の中央揃えの問題や、アイテムの高さが固定でない場合の縦方向の配置の問題については、テーブルを使う方が簡単です。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] 横型リストアイテム
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] XHTMLの自己完結型タグを除くオープンタグにマッチするRegEx
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] リンクを新しいタブまたはウィンドウで開く[重複]。
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] mailto:を使ってメールの件名や内容を設定することはできますか?
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?