Question

我在Parent 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应该占用剩下的空间。尝试添加保证金值但没有锻炼。

请帮我解决这个问题。这是小提琴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

Answer 2

溢出：隐藏在.parent上，.remaining上的高度规格有效：

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

Answer 3

第一个脏修复......“溢出：隐藏”;）但有趣的问题！有更优雅的方式吗？

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

Answer 4

尝试将height: 100%添加到variableHT：

Demo

.parent{
  height:300px;
  overflow:hidden;
}
.variableHT{
  height:auto;
  background-color:green;
}
.remaining{
  height: 100%
  background-color:yellow;
}

两个变量自动高度行占据父高（没有JS）

4 个答案: