我正在努力让div完全扩展到它的容器高度.
标记：
<div class="container"> <div class="innerOne inner"></div> <div class="innerTwo inner"></div> </div>
在不同的视口.innerTwo的内容比.innerOne的内容高,但我希望它的背景与.innerTwo的大小相同.
样式：
.container {
width: 100%;
height: auto;
background-color: yellow;
/* clearfix */
*zoom: 1;
&:before,&:after {
display: table;
content: "";
line-height: 0;
}
&:after {
clear: both;
}
}
.inner {
float: left;
width: 50%;
height: 100%;
background-color: red;
}
但高度不会匹配.我知道可以通过给容器设置一个高度来完成,但我不想这样做,因为它是一个响应式站点.这可能吗？我宁愿不使用JS.
解决方法
您可以使用display：table-cell属性.像这样写：
.container{
width:100%;
border:1px solid red;
display:table;
}
.inner{
display:table-cell;
background:green;
width:50%;
}
.innerTwo{
background:blue
}