Question

我有2个DIV，一个包含地图，一个在另一个之上。它应占用所有可用空间，但页脚高度为25px。

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

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

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

如何仅使用CSS和HTML实现此目的？

PS。我知道可能有一些简单的JavaScript解决方案，但出于教育的考虑，我想知道如何在没有javascript的情况下做到这一点。

Answer 1

看看这个： 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 */
}

还有其他方法可以实现这一目标和类似的效果。请知道这是否是您想要的。

希望这有帮助。

CSS：2个DIV，一个采用固定大小，另一个填充剩余空间

1 个答案: