7

我正在努力让一个 div 完全扩展到它的容器高度。

标记：

<div class="container">
  <div class="innerOne inner"></div>
  <div class="innerTwo inner"></div>
</div>

在不同视口.innerTwo的内容比 's 的高，.innerOne但我希望它的背景与.innerTwo's 的大小相同

款式：

.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。

4

3 回答 3

15

您可以为此使用display:table-cell属性。像这样写：

.container{
    width:100%;
    border:1px solid red;
    display:table;
}
.inner{
    display:table-cell;
    background:green;
    width:50%;
}
.innerTwo{
    background:blue
}

检查这个http://jsfiddle.net/XXHTC/

于 2013-01-27T14:40:21.760 回答
1

您可以在这里找到所需的解决方案：http: //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

祝你好运 ：）

于 2013-01-27T14:39:54.183 回答
0

本文讨论响应式媒体中的纵横比和大小问题。它可能不是您特定问题的答案，但讨论使用百分比填充的部分有时对我有所帮助。http://css-tricks.com/rundown-of-handling-flexible-media/

于 2013-01-27T14:37:42.477 回答