0

所以我正在尝试创建这个布局。

这是构成页面的 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>
4

1 回答 1

0

在我看来，您将需要 JavaScript 来实现这一点。

我的出发点可能来自这个标记，可能在 resize 触发的事件处理程序中实现最小/最大高度行为：

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-08T01:53:34.543 回答