スポンサーリンク

HTMLで縦の高さをheight:100%;にしたくてもできない場合のやり方解説

HTMLで縦の高さを100%にしたくてもできなかった経験はないだろうか。
カラムに当てているdivをhegiht:100%;ととしてもコンテンツの高さまでしか伸びなく、あるいはコンテンツよりも低くぺしゃんこになってしまうといったことがある。
コンテンツよりも低くなってしまう場合にはfloatとwidthを当ててあげればコンテンツ分までは伸びてくれる。だがコンテンツが少ない場合、ウィンドウサイズまで伸びきって欲しい場面も合ったりする。伸びてくれない原因はbodyのスタイルの当て方にある。heightをdivに当てても、親であるbodyがheight:100%;になっていないとぺしゃんこになってしまうのだ。下の例ではコンテンツも入っていないのにまるでテーブルレイアウトのように高さが自動的に伸びてくれる。Javascriptを使いたくない場合にはうってつけたろう。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style>
html {
 background:#F00;
 margin:0;
 height:100%;
}
body {
 background:#FFF;
 height:100%;
 margin:0 10px;
}
div {
 height:100%;
 margin:0 10px;
}
p {
 background:#FF0;
 height:60%;
 float:left;
 width:200px;
 margin:0 10px;
}
ul {
 height:20%;
 clear:both;
 background:#F55;
 margin:0;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
</ul>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<ul>
<li></li>
</ul>
</div>
</body>
</html>

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


カテゴリー: IT, WEB TECH | 投稿日: | 投稿者: