内部div在高度auto的容器内高度为100％

I'm struggling to get a div to expand fully to it's container's height.

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

Markup:

标记：

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

At different viewports .innerTwo's content is taller than that of .innerOne's but I would like it's background to be the same size as .innerTwo's

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

Styles:

样式：

.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;
}

But the heights wont match up. I know it can be done by giving the container a set height but I don't want to do that since it's a responsive site. Is this possible? I'd rather not use JS.

但高度不会匹配。我知道可以通过给容器设置一个高度来完成，但我不想这样做，因为它是一个响应式站点。这可能吗？我宁愿不使用JS。

3 个解决方案

#1

You can use display:table-cell property for this. Write like this:

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

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

Check this http://jsfiddle.net/XXHTC/

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

#2

This article discusses issues with aspect ratios and sizes in responsive media. It may not be the answer to your particular problem, but the section discussing the use of percentage padding has helped me on occasion. http://css-tricks.com/rundown-of-handling-flexible-media/

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

#3

You can find the desired solution here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

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

Good luck :)

祝你好运：）

#1