Html 当父级未设置高度时，设置内联块的100%高度

我有一个“简单”的css问题，我希望两列具有相同的高度，使用 {显示：内联块} 当父容器没有设置高度时，它会失败得很惨（目标是不让父容器设置任何高度，因为它应该由最高的列定义）。 我希望它是免费的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>

如何使100%的父行包装？
高度较大的随机内容

此处提供完整的JSFIDLE:

这种问题有什么解决办法吗

---

注意：它还必须与垂直对齐配合使用

您可以将其更改为使用

显示：表格行

和

显示：表格单元格

，用于仅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;
}

---

对于仅CSS的解决方案，您可以将其更改为使用

display:table row

和

display:table cell

：

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

---

我所看到的解决此类问题的CSS唯一解决方案是对div应用大量填充，然后应用大量负边距，这会将div向下吸，然后隐藏容器div中创建的额外空间

应用边距和填充

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

然后隐藏所有的空间

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

范例

。行包装器{
字体大小：0；/*无法更改：因为内联块之间没有空格*/
position:relative；/*尝试使该程序100%工作，但失败*/
溢出：隐藏
}
.line wrapper>div{
字体大小：14px；/*无法更改：因为内联块之间没有空格*/
显示：内联块；/*无法更改：不允许浮动*/
垂直对齐：顶部；
保证金底部：-9999px；
填充底部：9999px；
}
.专栏1{
宽度：30%；/*无法更改*/
height:100%；/*我所看到的解决这类问题的CSS唯一方法是对div应用大量的填充，然后在div上应用大量的负边距，其效果是将div向下吸，然后隐藏容器div中创建的额外空间

应用边距和填充

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

然后隐藏所有的空间

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

范例


。行包装器{
字体大小：0；/*无法更改：因为内联块之间没有空格*/
position:relative；/*尝试使该程序100%工作，但失败*/
溢出：隐藏
}
.line wrapper>div{
字体大小：14px；/*无法更改：因为内联块之间没有空格*/
显示：内联块；/*无法更改：不允许浮动*/
垂直对齐：顶部；
保证金底部：-9999px；
填充底部：9999px；
}
.专栏1{
宽度：30%；/*无法更改*/
高度：100%；/*谢谢。它似乎有效，更像是一个黑客而不是什么标准，但在{vertical align:middle；}上似乎失败了它似乎在Chrome上失败了。这肯定是一个黑客攻击，虽然我没有用
垂直对齐：中间
尝试过，但我发布的版本在Chrome 38上对我有效，我已经检查过了，除了垂直对齐属性外，它在IE9+上也有效。你是说它必须用
垂直对齐：中间
谢谢。它似乎可以rk，它看起来更像是一个黑客而不是什么标准，但它似乎在{vertical align:middle；}上失败了它似乎在Chrome上失败了。这肯定是一个黑客攻击，虽然我没有用
垂直对齐：中间
尝试过，但我发布的版本在Chrome 38上对我有效，我已经检查过了，除了垂直对齐属性外，它在IE9+上也有效。你是说它必须用
垂直对齐：中间
我的答案用工作吗e> 垂直对齐
。我的答案是使用
垂直对齐
。是的，我会更清楚地使用这个解决方案。出于好奇，在表中不使用display:table row和display:table cell时，使用display:table cell有没有副作用？没有@Quince，我想说没有。它长期支持的CSS，事实上，表单元格并不完全是块级别的元素，所以如果你想为它们的高度/宽度设置动画，使用div和table CSS可以实现平滑的动画效果，而不是像使用table cell那样进行跳跃式的显示/隐藏。是的，我会更干净地使用这个解决方案。出于好奇，在不使用em在表格中？不@Quince，我不这么认为。它长期支持的CSS，事实上表格单元格并不是完全的块级元素，所以如果你想为它们的高度/宽度设置动画，使用div和表格CSS将允许平滑的动画，而不是像表格单元格那样跳跃的显示/隐藏。