html - 两个可变自动高度行占据父高度(无 JS)

Question

我在父级 div 元素中有两个 div 元素，它们的类名分别为 .variableHT、.remaining。这是 html

<div class="parent">
   <div class="variableHT">1234</div>
   <div class="remaining"></div>
</div>

这是CSS

.parent{
  height:300px;
}
.variableHT{
  height:auto;
  background-color:green;
}
.remaining{
  margin-top:auto;
  margin-bottom:0px;
  background-color:yellow;
 }

我正在尝试制作两个 DIV，第一个是自动高度元素，高度不固定，它会根据内容大小增长。然后下一个 DIV 应该占据剩余的空间。尝试添加 margin 值但没有锻炼。

请帮我解决这个问题。这是 fiddle http://jsfiddle.net/GyULa/1/

Answer 1

这个怎么样:

.parent{
    display: table;
    height: 300px;
    width: 100%;
}
.variableHT{
    height: auto;
    display: table-row;
    background-color: green;
}
.remaining{
    height: 100%;
    display: table-cell;
    background-color: yellow;
}

这里是 fiddle link为之