header、ナビゲーション バー、body (ナビゲーションバーの右側)、およびfooterを使用して、標準の Web サイト レイアウトを作成しようとしています。
今、私はこれまでこれを行ってきました:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
これはこれを生成します:
CSS を確認すると、次のようになります。
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
ご覧のとおり、ボディとナビゲーション バーの両方の高さと最小の高さを設定して、残りの垂直スペースを埋めようとしました。
それでも影響はありません。ただし、これを行うheight: 500px
と、期待どおりにサイズが変更されます (もちろん、画面サイズが異なるとページの異なる部分またはビューが表示されるため、これは非常に良い方法ではありません)。
divs
したがって、基本的には、ハードコードされた値を使用せずに、残りの垂直方向のスペースを埋める方法を尋ねています。つまり100px
、パーセンテージで実行したいので、ページはすべてのブラウザで同じように見えます