私がやろうとしているのは、ヘッダーをページの上部に、フッターを下部に配置し、その間に利用可能なすべてのスペースをマップでいっぱいにすることです。また、ヘッダーとフッターの高さを % ではなく px に固定したいと考えています。
ただし、現時点ではメイン マップを 100% に設定しているため、フッターがページの下部から外れてスクロール バーが表示されます。
これは私のコード例です: http://jsfiddle.net/W4mXP/20/
CSS
html, body { height: 100%;
width: 100%;
}
#topbar {
height: 50px;
width: 100%;
background-color: black;
padding-left: 50px;
padding-right: 50px;
}
#main {
height: 100%;
width: 100%;
background-color: green;
}
#bottombar {
height: 25px;
width: 100%;
background-color: black;
padding-left: 50px;
padding-right: 50px;
}
.left {float: left;}
.right {float: right;}
HTML
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<!-- Header -->
<div id="topbar">
<div class="left">
Logo
</div>
<div class="right">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
</div>
<!-- Map -->
<div id="main">
Map
</div>
<!-- Footer -->
<div id="bottombar">
<div class="left">
Name
</div>
<div class="right">
About
</div>
</div>
</body>
</html>