CSS：2個DIV，一個需要一個固定的大小，另一個填充剩餘的空間

我有2個DIV，一個包含地圖，這個是高於另一個。它應該佔用所有的空間，除了頁腳，這是25px高。CSS：2個DIV，一個需要一個固定的大小，另一個填充剩餘的空間

目前我給出的地圖高度95％，頁腳25px。。問題是當窗戶變得非常大，頁腳變得enormousness，當窗口變得非常小，滾動條，踢

然而，這不是我想要的，我想：

#map { height: <window_height - footer_height> } 
#footer { height: 25px }

我怎樣才能實現這隻使用CSS和HTML？

PS。我知道可能有一些簡單的javascript解決方案，但出於教育的原因，我想知道如何在沒有javascript的情況下做到這一點。

來源

2009-11-11 user163365

看一看這樣的： keeping footers at the bottom of the page

所有代碼是存在的。基本上，你在你的HTML做到這一點：

<html><body> 
<div id="container"> 
    <div id="map"></div> 
    <div id="footer"></div> 
</div> 
</body></html>

然後在你的CSS：

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#map { 
    padding:10px; 
    padding-bottom:25px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:25px; /* Height of the footer */ 
}

還有其他的方法來實現這一點，類似的效果。讓我們知道這是你想要的。

希望這會有所幫助。

來源

2009-11-11 20:40:41 jfrej

不幸的是，它沒有。我使用的地圖是Google地圖，使用此代碼時只有10px。 – user163365 2009-11-11 22:06:26

你可以顯示你用來嵌入地圖的代碼嗎？您是否使用標準的Google地圖iframe解決方案？ – jfrej 2009-11-11 22:29:46

我使用javascript修復了它，但仍在尋找CSS解決方案。這裏是鏈接：http://zanzibar.idlesoft.net/geomap/ – user163365 2009-11-13 11:36:45

CSS：2個DIV，一個需要一個固定的大小，另一個填充剩餘的空間

回答

相關問題