[解決済み】DIVブロックにコンテンツがない場合でも、強制的にページの下まで伸ばすには?
2022-04-12 13:27:37
質問
以下のマークアップでは、content div をページの下まで伸ばそうとしていますが、表示するコンテンツがある場合のみ伸ばします。このようにしたい理由は、表示するコンテンツがない場合でも、垂直方向の境界線がページの下に表示されるようにするためです。
以下は私の デモ :
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
</form>
解決方法は?
あなたの問題は、divの高さが100%でないことではなく、それを囲むコンテナが100%でないことです。これは、あなたが使用していると思われるブラウザで役立ちます。
html,body { height:100%; }
パディングやマージンも調整する必要があるかもしれませんが、これで90%は完成です。すべてのブラウザで動作させる必要がある場合は、少しいじくり回す必要があります。
このサイトには優れた例がいくつかあります。
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
に行くのもおすすめです。 http://quirksmode.org/
関連
-
[解決済み】なぜ私のdivは重なっているのですか?
-
[解決済み] font-face は OpenType 埋め込み許可チェックに失敗しました。パーミッションはインストール可能である必要があります。
-
[解決済み] ブラウザでCSSファイルが更新されない
-
[解決済み] bootstrapのチェックボックスの色を変更するには?
-
[解決済み] CSS 不透明度 - 背景色
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] [Solved] 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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] FontAwesomeによる星評価用CSS
-
[解決済み] DIVを重ねる?
-
[解決済み] このベベルボタンをCSSで実現するには?
-
[解決済み] svgの円のダブルストロークの色
-
[解決済み] bootstrapのチェックボックスの色を変更するには?
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] HTMLとCSSのBackground-imageが表示されない