html - DIV 中的两排，一排具有固定高度，另一排具有流体高度

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 演示

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函数（不需要绝对定位）：

看到这个小提琴

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 using IE9 mode, FF, Chrome

编辑：

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

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

Answer 3

我在这里写了另一个答案，不使用 calc() 并且不中继第一个 div 的固定高度，所以即使它的高度在变化，第二个总是会跨越容器的其余部分。另外：它有更好的浏览器支持（IE8+ 和所有主流浏览器），以及它的纯 CSS。

检查这个工作小提琴

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;
}