流体高度主体，带头和脚 [英] Fluid height main body with header and footer
问题描述
我想做的是在页面顶部的页眉和底部的页脚，与地图充满所有可用空间之间。我还希望页眉和页脚有固定的高度作为px不是％。
但是，目前，因为我设置主地图为100％，它强制脚注关闭页面的底部，并引入了一个滚动条。
这是我的示例代码：
http://jsfiddle.net/W4mXP/20/
/ p>
html，body {height：100％;pre>
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 =radioid =radio1name =radio/>< label for =radio1>选择1< / label&
< input type =radioid =radio2name =radiochecked =checked/>< label for =radio2>选择2< / label&
< input type =radioid =radio3name =radio/>< label for =radio3>选择3< / label&
< / div>
< / form>
< / div>
< / div>
<！ - 地图 - >
< div id =main>
地图
< / div>
<！ - Footer - >
< div id =bottombar>
< div class =left>
名称
< / div>
< div class =right>
关于
< / div>
< / div>
< / body>
< / html>
解决方案我的回答可能有帮助：将div块设置为100％高度
只需设置页脚的高度和内容的负边距：
#footer {height：100px ; }
#container {margin-bottom：-100px; padding-bottom：100px; }
这是一个如何包含页脚的示例： JSFiddle 。
请注意，这不会在IE7中工作，因为它使用
box-sizing。
编辑：您还需要为容器添加填充防止容器文本显示在页脚下。我已经修复了JSFiddle的例子来包含这个。
What I am trying to do is have the header at the top of the page and the footer at the bottom, with the map full up all availiable space in-between. I also want the header and footer to have fixed heights as px not %.
However, at the moment because I set the main map to 100% it forces the footer off the bottom of the page and introduces a scroll bar.
This is my example code: 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>
解决方案My answer here may help: Set div block to 100% height
Simply set the height of the footer and a negative margin on the content:
#footer { height:100px; } #container { margin-bottom:-100px; padding-bottom:100px; }Here is an example of how you'd include a footer: JSFiddle.
Do note that this will not work in IE7 due to its usage of
box-sizing.Edit: You'll also need to add padding to the container as well to prevent container text appearing under the footer. I've fixed the JSFiddle example to include this.
这篇关于流体高度主体，带头和脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
