Question

我需要.col为.row高度的100％，但您可以看到第二个.col不足。如何在不使用任何“幻数”的情况下使其工作？

.row {
    position: relative;
    background: #f99;
}
.col {
    margin: 0 0 0 8px;
    display: inline-block;
    width: 40%;
    position: relative;
    vertical-align: top;
    background: #999;
    height: 100%;
}
.col:first-child {
    margin: 0;
}
.item {
    display: block;
    position: relative;
    top: 0;
    margin: 12px 0 0 0;
    min-height: 80px;
    width: 100%;
    outline: 4px solid black;
}
.item:first-child {
    margin: 0;
}
.item.large {
    min-height: 120px;
    height: 100%;
}
.item.red {
    background: #f00;
}
.item.blue {
    background: #0f0;
}
.item.green {
    background: #00f;
}

<div class="row">
    <div class="col">
        <div class="item red"></div>
        <div class="item blue"></div>
    </div>
    <div class="col">
        <div class="large item green"></div>
    </div>
</div>

Answer 1

如果你不关心任何低于11的IE，你可以通过flexbox来实现。

我展示了如何完成here。

.row {
    position: relative;
    background:#f99;
    display: flex;
}

.col {
    margin:0 0 0 8px;
    display:inline-block;
    width:40%;
    position: relative;
    vertical-align:top;
    background: #999;
}
.col:first-child {
    margin:0;
}
.col:last-child {
    display:flex;
}

.item {
    display:block;
    position: relative;
    top:0;
    margin: 12px 0 0 0;
    min-height: 80px;
    width: 100%;
    outline:4px solid black;
}
.item:first-child {
    margin:0;
}

.item.large {
    min-height:120px;
}

.item.red {
    background:#f00;
}
.item.blue {
    background:#0f0;
}
.item.green {
    background:#00f;
}

Answer 2

这可以通过使用flexbox：

来实现

将display: flex;添加到.row。这告诉孩子们使用flexbox模型
将flex-direction: row;添加到.row，因为我们希望孩子们水平对齐
将display: flex;添加到.col。这告诉孩子们使用flexbox模型
将flex-direction: column;添加到.col，因为我们希望孩子们垂直对齐
将flex: 1;添加到.item以允许其增长并填写可用空间（如果需要）
可以从原始版本中删除多种样式，因为在使用flexbox

＆＃13;

.row {
    background:#f99;
    display: flex;
    flex-direction: row;
}
.col {
    background: #999;
    display: flex;
    flex-direction: column;
    margin:0 0 0 12px;
    width:40%;
}
.col:first-child {
    margin:0;
}
.item {
    flex: 1;
    margin: 12px 0 0 0;
    min-height: 80px;
    outline:4px solid black;
    width: 100%;
}
.item:first-child {
    margin:0;
}
.item.red {
    background:#f00;
}
.item.blue {
    background:#0f0;
}
.item.green {
    background:#00f;
}

＆＃13;

<div class="row">
    <div class="col">
        <div class="item red"></div>
        <div class="item blue"></div>
    </div>
    <div class="col">
        <div class="large item green"></div>
    </div>
</div>

＆＃13;

flexbox支持非常好，尽管旧版本的IE不支持它。 http://caniuse.com/#feat=flexbox

Answer 3

这是简化的CSS表格布局，技巧是将整个高度div设置为绝对位置，顶部和底部都设置为0。

<强> JsFiddle Demo

.row {
    display: table;
}
.col {
    display: table-cell;
    vertical-align: top;
    position: relative;
}
.item.large {
    position: absolute;
    top: 0;
    bottom: 0;
}
.item.red {
    background: red;
}
.item.blue {
    background: blue;
}
.item.green {
    background: green;
}

<div class="row">
    <div class="col">
        <div class="item red">r<br/>e<br/>d</div>
        <div class="item blue">blue</div>
    </div>
    <div class="col">
        <div class="large item green">green</div>
    </div>
</div>

Answer 4

子项目高度百分比值仅在父项目定义了高度时才有效。

否则你可以用jQuery实现它

$(".col").height($(".row").height());

Answer 5

试试这个

.large.item {
    height:100%;
}

Answer 6

如果你可以使父亲相对定位，并且孩子绝对有位，那么给孩子一个底部的值为0将使它延伸到父母的全高。

如何使父亲身高未知的内部div全高？

6 个答案: