我希望有相同高度的列,所以我创建了一个 display:table
容器和 display:table-cell
子容器,它们都有 height:100 %
设置。问题是,它只在 Firefox 上如我所愿地工作,但在 Chrome 和 IE11 上不起作用。
下面是HTML代码:
<div class="featured">
<div class="row">
<div class="one-half">
<div class="light-bg">
<div class="row">
<div class="one-quarter"><div class="icon icon-server icon-1"></div></div>
<div class="three-quarter">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the le text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the le
</div>
</div>
</div>
</div>
<div class="one-half">
<div class="light-bg">
<div class="row">
<div class="one-quarter"><div class="icon icon-server icon-2"></div></div>
<div class="three-quarter">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the le
</div>
</div>
</div>
</div>
</div>
</div>
这是 CSS:
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit;
}
.row{
margin-bottom:20px;
margin-left:-10px;
margin-right:-10px;
}
.row:before,
.row:after{
content: "";
display: table;
}
.row:after{
clear:both;
}
.one-half, .one-quarter, .three-quarter{
float:left;
padding:0 10px;
box-sizing:border-box;
}
.one-half{
width:50%;
}
.one-quarter{
width:25%;
}
.three-quarter{
width:75%;
}
.light-bg{
background:#ddd;
}
.featured > .row{
display:table;
height:100%;
}
.featured > .row .one-half{
display:table-cell;
height:100%;
float:none;
vertical-align:top;
}
.featured > .row .light-bg{
padding:20px;
border-radius:4px;
height:100%;
}
.featured > .row .light-bg .row{
margin-bottom:0;
}
.featured > .row .light-bg h6{
margin:0 0 10px 0;
color:#000;
}
.featured > .row .light-bg .icon{
text-align:center;
width:100%;
height:96px;
background:#fff;
}
非常感谢任何想法。我不能使用 flexbox,因为 IE9 不支持它。
谢谢。
最佳答案
因为所有浏览器都可以检测到.one-half
的高度正确(Chrome 除外),最后我使用 JavaScript 显式设置它的高度来解决 IE(和任何其他浏览器)的这个问题,因为子元素使用 height:100%
,其中一个 child 是具有背景颜色的元素。
对于 Chrome,我必须申请 display:table;
至 .light-bg
允许正确检测 .one-half
的高度 parent 。
关于html - table-cell 的 child 未占据 100% 的高度(仅适用于 FF),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30679052/