带有页眉和页脚的流体高度主体

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

来源

2013-02-15 Jimmy

在这里，我的回答可以帮助：Set div block to 100% height

硅mply设置的页脚的高度，并在内容阴性切缘：

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

这里是你如何包括页脚的例子：JSFiddle。

请注意，由于使用box-sizing，因此在IE7中无法使用。

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

来源

2013-02-15 10:09:28

带有页眉和页脚的流体高度主体

回答

相关问题