CSS盒子拉伸占用所有可用空间

所以我试图创建这种布局。CSS盒子拉伸占用所有可用空间

这里是3个“盒子”构成的页面图片：https://dl.dropbox.com/u/9699560/layout.jpg

这里是我的尝试：https://dl.dropbox.com/u/9699560/map.html

红色框是一个谷歌地图，因此，如果其高度不指定，它收缩到零。我想要做的是以下几点：

绿色框是固定宽度，固定高度。蓝框应占页面垂直高度的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>

来源

2010-08-07 Nick

请张贴你的企图，这样我们就不用经过这么多的工作了？ – 2010-08-07 16:43:49

您需要支持哪些浏览器？ – babtek 2010-08-08 01:30:58

最低的分母是IE 7。 – Nick 2010-08-08 01:43:00

在我看来，你将需要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>

来源

2010-08-08 01:53:34 babtek

CSS盒子拉伸占用所有可用空间

回答

相关问题