Q&A
初歩的な質問になってしまいますがドコへ行っても納得のできる答えが書いてある記事が見つからないので質問します。
html、bodyにはwidth、heightともに100%にして、その中の.box-1のmin-heightを100%にして、中身がなくてもウィンドウの高さに合わせるようにしました。
.box-1の中に.box-2をつくり、これもウィンドウの高さになるようにheightを100%にしようとしましたがうまくいきませんでした。
わたしの考えは、
.box-1にheight: 100%してしまうと、中のコンテンツがウィンドウの高さよりも大きい場合、.box-1を突き出てしまうので.box-1にはmin-height: 100%をする必要がある。
ところが.box-2の高さをウィンドウの高さに合わせようと、height: 100%をしても高さがえられません。
なぜでしょうか。
heightとmin-heightの使い分けも曖昧になってきてしまったので合わせて教えていだけると幸いです。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 * { 7 margin: 0 auto; 8 } 9 html, 10 body { 11 width: 100%; 12 height: 100%; 13 } 14 .box-1 { 15 width: 600px; 16 min-height: 100%; 17 background-color: red; 18 } 19 .box-2 { 20 width: 300px; 21 height: 100%; 22 background-color: blue; 23 } 24 </style> 25</head> 26<body> 27 28<div class="box-1"> 29 <div class="box-2"> 30 </div> 31</div> 32 33</body> 34</html>
回答3件
0
ベストアンサー
１．親要素のheightが明示されている場合、
子要素の高さは親要素のheightに対する%で指定されます。
２．親要素のheightが明示されていない場合（autoまたは無指定）の場合、
子要素の高さを%指定しても「auto」として解釈されます。
３．親要素のheightを指定せず、min-heightを指定した場合、
min-heightの値は子要素に継承されませんので、親要素の高さが明示されていない場合と同じ挙動となります。
ご質問の例では３のケースに該当しますので、.box-1をmin-height: 100%;、.box-2をheight:100%;としても、.box-2のheightは「auto」と解釈され、高さ100%にはなりません。
投稿2015/11/18 16:47
総合スコア3763
0
投稿2018/07/25 17:56
総合スコア28
0
スマホから書き込んでいます。
css
1* { 2 margin : 0 auto; 3 padding : 0; 4}
では如何でしょうか。
投稿2015/11/18 11:02
総合スコア354
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/19 10:12
2015/11/19 11:22
2015/11/20 02:28
2018/07/25 17:56 編集