Html Div 100%高度，带内嵌显示

我需要有两列

div

s

右栏将有一个随机内容，可能有1行或100行

左栏我想跟随右栏的高度，不使用javascript

我正在尝试：

<div>
   <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">
   </div>
   <div style="display:inline-block; width:30%; vertical-align:top;">
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
   </div>
</div>

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

问题是左列的高度始终为0px，它应该显示一个与右列大小相同的红色列

那么如何使用div来实现这一点呢

编辑

Rick Hitchcock的答案非常好，但不适用于Firefox。还有其他建议吗？

试试以下方法：

html，正文{
身高：100%；
显示：表格；
} 
.左，.右{
身高：100%；
宽度：50%；
浮动：左；
显示：表格单元格；
} 
.左{
背景：红色；
}

页面标题
这是一个标题
这是一段

这是一个标题
这是一段

这是一个标题
这是一段

这是一个标题
这是一个段落。

为包含的

div

提供一个100%宽度的表格显示

然后，它的子元素的行为将类似于表单元格，并增长到与行中最高的

div

相匹配

.container{
显示：表格；
宽度：100%；
}

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

这篇文章似乎很好地解释了这方面的方法，并在JS中为没有flexbox的浏览器提供了一个回退

---

我已经使用flexbox有一段时间了，在我的SCS和其他混合软件的帮助下。一开始似乎很困惑，但第一篇文章应该可以帮助您解决问题，同时让您的脚在flexbox中湿透。

使用

显示：表格

.wrapper{
显示：表格；
宽度：60%；
}
.左{
显示：表格单元格；
宽度：30%；
垂直对齐：顶部；
背景：#F00；
}
.对{
显示：表格单元格；
宽度：30%；
垂直对齐：顶部；
背景：#0F0；
}

左边
内容
内容
内容
内容
内容
内容
内容
内容
内容

可能重复关于如何使左栏100%高度的div，这里有一些很好的答案。如果有帮助，请注意，使用背景色也可以实现类似的效果，而不必使div 100%高。也就是说，您可以使用容器DIF的红色背景和右栏的白色背景。Meg现在遵循您的30%，并且为什么需要它为内嵌块？BTW，如果您要大量执行这些布局，您可能需要考虑网格框架。我最喜欢的两个是和。如果你想自己做的话，也可以参考一些好的现代理论：我想知道，如果你使用的是

display:table block

，那么在列中使用

display:table

，而不是

inline block

，这是否更有意义呢？我真的需要“display:inline block”，你的答案非常有效。另一个答案也很好，但它不使用内联-block@MattBrowne，如果您单独使用

表格单元格

，则不考虑30%的宽度。当设置为“显示：表格”时，内部div是否会自动变为“表格单元格”？@Rick Hitchcock您是大师！事实上，只有当display设置为inline block时，30%才有效！非常感谢你！您的代码不能使用30%的宽度。由于某些原因，30%不起作用。@Samul现在起作用了，正如大家所知，您只需设置包装的组合宽度。您介意告诉我为什么使用30%吗？在这种情况下，50%或任何其他值也会起同样的作用，对吗？但是你看，如果我需要一个div是30%，另一个是70%，我该怎么办？我是个白痴，你的答案对30-70%的div非常有效。非常感谢你，我不会再打扰你了！请检查此

页面标题html，正文{高度：100%；显示：表格；}.left、.right{height:100%；width:50%；float:left；显示：表格单元格；}.left{background:red；}这是标题这是段落。
这是标题这是段落。
这是标题这是段落。
这是标题这是段落。