height:100% は包含ブロックと同じheightだから包含ブロックには overflow-y:hidden が必要
"パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます"
次のようなHMLソースで「フッタなど」が上のブロックに重なってしまった。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>height:100%の注意</title>
</head>
<body>
<div style="width:300px;height:400px;">
<h4>タイトル</h4>
<div style="background-color:yellow;height:100%;"></div>
</div>
<div>フッタなど</div>
</body>
</html>
原因は冒頭の様な仕様のためだった。
height:100%;を使用したのはiframeで高さが包含ブロックいっぱいに広がるようにするためだったのだが、iframeに限ったことではなく、height:100%;を使った時にはそのブロックが包含ブロックをオーバーしてしまうので注意が必要らしい。私が作った【ホームページ雛形】では問題が生じなかったので気付かなかった。
この問題を解決するためには次のように包含ブロックに overflow-y:hidden; を指定しておいた方が良さそう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>height:100%の注意</title>
</head>
<body>
<div style="width:300px;height:400px;overflow-y:hidden;">
<h4>タイトル</h4>
<div style="background-color:yellow;height:100%;"></div>
</div>
<div>フッタなど</div>
</body>
</html>
追記：2021/5/6 16:00頃
内側のブロックがiframeならば次のように display:inline-block; を追加しても良い。 私が作った【ホームページ雛形】では問題が生じなかったのは display:inline-block;があったかららしい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>height:100%の注意</title>
</head>
<body>
<div style="width:300px;height:400px;display:inline-block;">
<h4>タイトル</h4>
<iframe src="" style="background-color:yellow;height:100%;"></iframe>
</div>
<div>フッタなど</div>
</body>
</html>
コメント
コメントを投稿