CSS 框拉伸以占据所有可用空间
所以我正在尝试创建这个布局。
这是构成页面的 3 个“框”的图片： https://dl .dropbox.com/u/9699560/layout.jpg
这是我的尝试：https://dl.dropbox.com/u/9699560/map.html
红色框是 Google 地图，因此如果未指定其高度，它将缩小到零。我想做的是：
绿色框是固定宽度、固定高度。蓝色框应占据页面垂直高度的20%，最大高度为100px。红色框应占据所有剩余的垂直空间。
如果有人能弄清楚这一点，我想走得更远一点，这样当浏览器窗口垂直扩展并且蓝色框的顶部达到绿色框底部的水平时，它会向左扩展以占据页面的 100%宽度。
我尝试过浮动、绝对和相对定位，但无法使其与纯 CSS 一起使用。如果必须的话，我会使用 JavaScript，但我想避免使用 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>
So I'm trying to create this layout.
Here is a picture of the 3 "boxes" that constitute the page: https://dl.dropbox.com/u/9699560/layout.jpg
And here is my attempt: https://dl.dropbox.com/u/9699560/map.html
The red box is a Google Map, so if its height isn't specified, it shrinks to zero. What I am trying to do is the following:
The green box is fixed width, fixed height. The blue box should occupy 20% of the vertical height of the page, with a maximum height of 100px. The red box should occupy all of the remaining vertical space.
If anyone can figure that out, I'd like to go a little farther, such that when the browser window is expanded vertically and the blue box's top reaches the level of the green box's bottom, it expands left to occupy 100% of the page width.
I've tried floats, absolute, and relative positioning and I cannot get this to work with pure CSS. If I have to, I will use JavaScript, but I would like to avoid that unless it's the only option.
Thanks!
Here's an attempt (remove comments if you use it):
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;
}
and the HTML
<html>
<head></head>
<body>
<div id="nav"></div>
<div id="map"></div>
<div id="footer"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在我看来，你需要 JavaScript 来实现这个。
我的起点可能是从这个标记开始，也许在调整大小时触发的事件处理程序中实现最小/最大高度行为：
CSS
HTML
In my opinion, you will need JavaScript to implement this.
My starting point would probably be from this markup, maybe implement the min/max height behaviors in an event handler that fires on resize :
CSS
HTML