[解決済み】画面の高さに合わせてdivを展開するheight: 100% が機能しないのはなぜですか?
2022-03-24 07:28:10
質問
カルーセルDIV(s7)を画面全体の高さまで展開させたい。なぜ成功しないのか、見当がつきません。ページを見るには こちら .
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}
<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">
解決方法は?
高さに対してパーセント値が機能するためには、親の高さが決定されている必要があります。唯一の例外は
ルート
要素
<html>
のように、パーセンテージの高さを指定することができます。
というわけで、すべての要素に高さが設定されましたが、その中で
<html>
で、これを追加します。
html {
height: 100%;
}
そして、あなたのコードは問題なく動作するはずです。
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
<div id=fullheight>
Lorem Ipsum
</div>
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] フッターの内容が重なっているのを修正するには?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] セルフクローズスクリプトエレメントが機能しないのはなぜですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み】フッターをページの下部に中央に配置するにはどうすればよいですか?
-
[解決済み] span with onclick event inside the tag
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] 絶対位置が機能しない
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] css画像が表示されない
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?