Question

我有像下面的DIV

<div class="parent">
    <div class="fixedHt"></div>
    <div class="fluidHt"></div>
</div>

我写了如下的CSS

.fixedHt{
     height:30px;
}
.fluidHt{
     margin-top:30px;
}

我希望用浮点数实现相同的列，我怎么能在行中实现呢？

Answer 1

jsFiddle Demo

<强> HTML：

<div class="parent">
    <div class="fixedHt small"></div>
    <div class="fluidHt streched"></div>
</div>

<强> CSS：

.streched {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 2

对于支持CSS3的浏览器，请使用 calc 功能（无需绝对定位）：

请参阅此Fiddle

<强> HTML：

<div class="parent">
    <div class="fixedHt"></div>
    <div class="fluidHt"></div>
</div>

<强> CSS

.parent {
    height: 300px;
    width: 300px;
    border: 3px solid #000;
}
.fixedHt
{
    height: 30px;
    background-color: red;
}
.fluidHt
{
    height: calc(100% - 30px);
    background-color: blue;
}

在上测试：IE10，IE10使用IE9模式，FF，Chrome

修改

IE8不支持CSS3，因此您可以在height: 270px;规则中使用.fluidHt（仅当固定高度对您来说不是问题时），例如Fiddle [适用于所有Broswers] ，

或者您可以应用动态修复第二个div高度的脚本。像这样Fiddle [适用于所有Broswers]

Answer 3

我在这里写了另一个答案，不使用calc（）并且不在第一个div的固定高度上进行中继，所以即使它的高度发生变化，第二个也将始终跨越容器的其余部分。另外：它有更好的浏览器支持（IE8 +＆amp;所有主流浏览器）和它的纯CSS。

选中此Working Fiddle

HTML：（相同）

<div class="parent">
    <div class="fixedHt"></div>
    <div class="fluidHt"></div>
</div>

<强> CSS：

.parent
{
    height: 300px;
    width: 300px;
    border: 3px solid #000;
}
.parent:before
{
    content: '';
    height: 100%;
    float: left;
}
.fixedHt
{
    height: 30px; /*can be any height*/
    background-color: red;
}
.fluidHt
{
    background-color: blue;
}
.fluidHt:after
{
    content: '';
    clear: both;
    display: block;
}

DIV中的两行，一行具有固定高度，另一行具有流体高度

3 个答案: