html - 当父级没有设置高度时设置内联 block 的 100% 高度

Question

我有一个“简单”的 css 问题，我希望两列的高度相同，使用{ 显示:内联 block }当父容器没有设置高度时它会失败(目标是不让父容器设置任何高度，因为它应该由最高列定义。如果可能的话，我希望它是免费的 Javascript。

<div class="line-wrapper">
    <div class="column1">How to make that of 100% of its parent line-wrapper?</div>
    <div class="column2" style="height:200px">Random content with a larger height</div>
</div>

完整的 JSFiddle 在这里可用:

http://jsfiddle.net/darknessm0404/1a4yyyc9/1/

这种问题有解决办法吗？

注意:它也必须与 vertical-align 一起使用

Answer 1

您可以将它们更改为使用 display:table-row 和 display:table-cell 作为纯 CSS 解决方案:

.line-wrapper {
font-size:0;  /* CANNOT CHANGE : For no space between inline-blocks */
position:relative; /* Tried to get the 100% working, but it fails*/
display:table-row;
}

.line-wrapper > div {
font-size:14px; /* CANNOT CHANGE : For no space between inline-blocks */
display:table-cell; /* CANNOT CHANGE : NO float allowed */
vertical-align:top;
}

http://jsfiddle.net/1a4yyyc9/3/