如何设置一组 3 个 div(动态大小和可见性)以自动填充(高度)页面上的特定空间。
例如,到目前为止我已经创建了:
<div id="container">
<div id="details">...</div>
<div id="video">...</div>
<div id="map">...</div>
</div>
<div id="other_content">...</div>
#container 应该是全宽的,自动高度取决于最大子 div 的大小。
#details div 应显示在左侧“列”(这通常是最高的 div,但有时会小于 #video 和 #map 的组合)。
#video 和#map div 都应显示为右侧的“列”,#video 在#map 的顶部。
注意:#video 并不总是可见 - 在这种情况下,#map 应该调整到 #details 的高度(如果更大)| 或显示为最小高度(如果 #details 较小)。
CSS
#container {
float: left;
}
#details {
float: left;
width: 290px;
}
#video {
float: left;
width: 560px;
}
#map {
float: left;
width: 560px;
min-height: 345px;
height: 100%
}
#other_content {
clear: left;
}
我似乎无法让它工作,有一个动态大小(最大子对象的高度)容器,所有子对象都显示完整高度。