作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何设置一组 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;
}
我似乎无法让它正常工作,因为它有一个动态大小(最大子对象的高度)容器,所有子对象都显示完整高度。
最佳答案
一般来说, float 不适合用于布局目的。
对于等高列,使用表格显示属性是获得最大浏览器支持的最佳选择。首先,您需要对标记稍作修改。
http://cssdeck.com/labs/eipgkxef
<div id="container">
<div id="details">...</div>
<div class="foo">
<div id="video">...</div>
<div id="map">...</div>
</div>
</div>
#container {
display: table;
width: 100%; /* optional */
}
#details {
display: table-cell;
width: 290px;
}
.foo {
display: table-cell;
}
#video {
width: 560px;
}
#map {
width: 560px;
}
Flexbox 可用于实现相同的效果(您仍然需要使用额外的元素),但对它的支持比使用此方法要低得多。
http://codepen.io/cimmanon/pen/Ecerl
#container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* fix for old Firefox */
width: 100%;
}
#details {
width: 290px;
}
.foo {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
/* fix for old Firefox */
width: 100%;
}
#video, #map {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
关于css - 如何在保持动态子 div 100% 高度的同时调整父 div 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16917579/
我是一名优秀的程序员,十分优秀!