如何将子div高度扩展为父高?

时间:2016-03-24 12:58:43

标签: html css

我有两个div在同一行上对齐,由一条垂直线分隔,我希望该行始终具有父div的高度。

我尝试实现找到的所有解决方案,但没有一个有效(不能使用position:absolute,父级的display:tableoverflow:hidden没有效果。)

JSFIDDLE

这是我的代码:

HTML:

<div class="parent-div">
  <div class="first-child">
    <span class="block">Item</span>
    <span class="block">Item</span>
    <span class="block">Item</span>
  </div>
  <div class="second-child">
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span> 
  </div>
</div>

CSS:

.parent-div {
  background:green;
  display: inline-block;
  width: 100%;
}

.first-child,
.second-child {
  float: left;
}

.first-child {
  width: 50px;
  border-right: 2px solid red;
}

.second-child {
  padding-left: 10px;
}

.block {
  display: block;
}

2 个答案:

答案 0 :(得分:5)

您可以将display:inline-block更改为display:flex;.parent-div

检查 demo

答案 1 :(得分:1)

如果你给父div显示一个像这样的表:

.parent-div {
height: 100%;
display: table;
}

对于孩子来说,一个tabel-cell并删除像这样的浮动:

.first-child,
.second-child {
  display:block;
      height: 100%;
    }

请检查:https://jsfiddle.net/k45f4Ls2/5/