CSS 内部 div 在高度为 auto 的容器内具有 100% 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14548360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inner div to have height 100% inside a container of height auto
提问by Adam Waite
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。
回答by sandeep
You can use display:table-cellproperty 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/
回答by Peter Wooster
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/
回答by Grávuj Miklós Henrich
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 :)
祝你好运 ：）
