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，一个需要一个固定的大小，另一个填充剩余的空间

回答

相关问题