Html CSS:2个div，一个采用固定大小，另一个填充剩余空间_Html_Css

Html CSS:2个div，一个采用固定大小，另一个填充剩余空间

html css

Html CSS:2个div，一个采用固定大小，另一个填充剩余空间,html,css,Html,Css,我有两个div，一个包含地图，这一个在另一个上面。它应该占用所有可用空间，但页脚除外，页脚高度为25px 目前我给地图的高度是95%，页脚是25px。问题是当窗口变得非常大时，页脚变得非常大，当窗口变得非常小时，滚动条就会出现但是，这不是我想要的，我想要： #map { height: <window_height - footer_height> } #footer { height: 25px } #映射{高度：} #页脚{高度：25px} 仅使用CSS和HTML如何实现这

我有两个div，一个包含地图，这一个在另一个上面。它应该占用所有可用空间，但页脚除外，页脚高度为25px

目前我给地图的高度是95%，页脚是25px。问题是当窗口变得非常大时，页脚变得非常大，当窗口变得非常小时，滚动条就会出现

但是，这不是我想要的，我想要：

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

#映射{高度：}
#页脚{高度：25px}

仅使用CSS和HTML如何实现这一点

另外，我知道可能有一些简单的javascript解决方案，但为了教育起见，我想知道在没有javascript的情况下如何做到这一点。

看看这个：

所有代码都在那里。基本上，您可以在HTML中执行此操作：

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

还有其他方法可以达到这种效果和类似效果。让我知道这是否是你想要的

希望这有帮助。

不幸的是，它没有。我使用的地图是谷歌地图，当我使用这段代码时，它只有10px高。你能显示你用来嵌入地图的代码吗？你使用的是标准的谷歌地图iframe解决方案吗？我用javascript修复了它，但仍然在寻找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 */
}