html - 如何在自动高度 div 的子 div 上设置 50% 高度？

Question

我想设置一个由 3 个单元格组成的 block :

父div设置为100%宽度，两列为50%宽度。内容需要随着页面扩展/收缩，因为它将是一个响应式页面。 由于我不知道父 div 的高度，我只能将右侧的行设置为百分比高度，但 50% 对自动高度父无效。 我怎样才能达到父 div 高度的 50% 的上半部分和情人？ 图片的宽高比始终为 1:1

<div class="container">
<div class="column blue"><img src="square.png"></div><!--
--><div class="column yellow"><!--
    --><div class="row green">Upper half</div><!--
    --><div class="row red">Lower half</div>
</div>

CSS

body {
    margin 0;
    padding 0;
}
.container {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
}
img {
    width: 100%;
    padding 0;
    margin 0;
    border: none;
}
.column {
    width: 50%;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
}
.row {
    width: 100%;
    height: 50%;
    padding: 0;
    margin: 0;
    vertical-align: top;
    display: inline-block;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.yellow {
    background-color: yellow;
}

到目前为止，这是我的代码:http://jsfiddle.net/7y9eK/

Answer 1

像下面这样更新你的 CSS。

.column {
width: 50%;
padding: 0;
margin: 0;
display: table-cell;
vertical-align: top;
}
.red {
background-color: red;
height:50%;
}
.green {
background-color: green;
height:50%;
}

更新了下面的 jsfiddle。

http://jsfiddle.net/7y9eK/14/