带页眉和页脚的流体高度主体答案

【问题标题】：Fluid height main body with header and footer带页眉和页脚的流体高度主体
【发布时间】：2013-01-31 06:30:48
【问题描述】：

我想要做的是将页眉放在页面顶部，将页脚放在底部，地图填满中间的所有可用空间。我还希望页眉和页脚的高度固定为 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>

【问题讨论】：

标签： html css web height

【解决方案1】：

我的回答可能会有所帮助：Set div block to 100% height

只需设置页脚的高度和内容的负边距：

#footer { height:100px; }
#container { margin-bottom:-100px; padding-bottom:100px; }

以下是如何添加页脚的示例：JSFiddle。

请注意，由于使用了box-sizing，这在 IE7 中不起作用。

编辑：您还需要向容器添加填充，以防止容器文本出现在页脚下方。我已经修复了 JSFiddle 示例以包含此内容。

【讨论】：