帶有頁眉和頁腳的流體高度主體

我想要做的是在頁面頂部標題和底部頁腳，地圖充滿所有可用空間。我還希望頁眉和頁腳具有固定的高度，因爲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

帶有頁眉和頁腳的流體高度主體

回答

相關問題