我正在努力让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 }