我想做的是将页眉放在页面顶部，将页脚放在底部， map 填满中间的所有可用空间。我还希望页眉和页脚的高度固定为 px 而不是 %。
但是，目前因为我将主 map 设置为 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>
最佳答案
我在这里的回答可能会有所帮助:Set div block to 100% height
简单地设置页脚的高度和内容的负边距:
#footer { height:100px; }
#container { margin-bottom:-100px; padding-bottom:100px; }
这是一个如何包含页脚的示例:JSFiddle .
请注意，由于使用了 box-sizing，这在 IE7 中不起作用。
编辑:您还需要向容器添加填充，以防止容器文本出现在页脚下方。我已经修复了 JSFiddle 示例以包含它。
关于html - 带页眉和页脚的流体高度主体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14892047/