内联块元素如何撑开父容器高度

Question

我有两个并排的div元素，它们都被设置为inline-block。它们都在一个包含的div内。我将右侧div的高度设置为100％，但由于包含div的高度是动态的，所以它不会扩展。有人知道如何使右侧div（列）扩展到包含div的动态高度吗？

<div class="container">
<div class="left_column">Dynamic Content In Here</div>
<div class="right_column">Side bar to expand to the height of the containing div</div>
</div>

谢谢

奥利弗

- ORStudios

---

嗨，问题出在包含 div 的高度是动态的。想法是左侧 div 中的内容将推动包含 div 向下。如果没有设置高度属性，则右侧 div 不会扩展到包含 div 的动态高度。 - ORStudios

Answer 1

在遇到同样的问题后，我认为最简单的解决方案是使用table-cell作为显示属性。这样做可以完美地解决问题！

- Thomas

Answer 2

我想您正在搜索类似以下内容的信息：

我认为您正在寻找这样的信息：

.container {
    min-height: 700px;
}

.right_column {
    min-height: inherit;
}

请参考这个jsfiddle示例。

- scessor

Answer 3

尝试添加：

html, body
{
  height:100%;
}

#container
{
 min-height:100%;
}

- allaire

---

我在容器上设置了最小高度为700像素，但是内联块级div的100%高度被忽略了。 - ORStudios

如果我设置高度为700像素，它可以正常工作，但如果我设置最小高度，则会被忽略。 - ORStudios