因此，我正在尝试创建此布局。
这是构成页面的3个“框”的图片：https://dl.dropbox.com/u/9699560/layout.jpg
这是我的尝试：https://dl.dropbox.com/u/9699560/map.html
红色框是Google地图，因此，如果未指定其高度，则缩小为零。我正在尝试做以下事情：
绿框的宽度是固定的，高度是固定的。蓝色框应占据页面垂直高度的20％，最大高度为100px。红色框应占据所有剩余的垂直空间。
如果有人能弄清楚，我想走得更远，这样，当浏览器窗口垂直扩展且蓝框的顶部达到绿框底部的水平时，它向左扩展即可占据页面的100％宽度。
我已经尝试过浮动，绝对和相对定位，但是我无法将其与纯CSS一起使用。如果需要的话，我将使用JavaScript，但是除非有其他选择，否则我将避免使用它。
谢谢！
这是一种尝试（如果使用，请删除评论）：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#nav {
position: relative;
width: 200px;
height: 400px;
background-color: green;
}
#map {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 80%; // If #footer is 200px, should occupy all available space
background-color: red;
}
#footer {
position: absolute;
left: 200px; // Should "become" 0 when window height pulls it past #nav
right: 0;
bottom: 0;
height: 20%;
max-height: 100px;
background-color: blue;
}
和HTML
<html>
<head></head>
<body>
<div id="nav"></div>
<div id="map"></div>
<div id="footer"></div>
</body>
</html>
最佳答案
我认为，您将需要JavaScript来实现此目的。
我的出发点可能来自此标记，也许在事件处理程序中实现了最小/最大高度行为，该事件在调整大小时触发：
的CSS
html, body { margin: 0; padding: 0; }
#nav { background-color:green; width: 200px; height: 400px; float:left; }
#map { background-color:red; height: 80%; margin-left: 200px; }
#footer { background-color: blue; height:20%; }
的HTML
<div id="nav">nav content</div>
<div id="map">map content</div>
<div id="footer">footer content</div>