Question

我需要帮助在子div与CSS之间拆分父div的高度，但是2子div溢出父。我需要他们是父母的50％+边际空间

HTML

<div class="container">
<div class="row">
    <div class="col-sm-6">
        <div class="col-sm-12 NoPadding"><div class="Data"></div></div>
        <div class="col-sm-12 NoPadding"><div class="Data"></div></div>
    </div>
</div>

CSS：

.container {
    height: 210px;
    background-color: #CCC;
    margin-bottom: 10px;
}
.row {
    height: inherit;
}
.col-sm-6 {
    height: 100%;
    width: 50%;
}
.Data{
background-color: darkturquoise;
    width: 100%;
    height:inherit;
}
.col-sm-6 .col-sm-12 {
    height:50%;
    width:100%;
    background-color: black;
    margin-bottom: 10px;
}
.col-sm-6 .col-sm-12:last-child{
margin: 0;
}

.col-sm-6 .col-sm-12 .Data {
height:100%;
    background-color: aqua;

}


.NoPadding {
padding: 0;
}

Answer 1

您可以使用calc来计算相应的height

将您的CSS更新为：

.col-sm-6 .col-sm-12 {
  height: calc(50% - 5px); /* calculate height with the margin */
  width: 100%;
  background-color: black;
  margin-bottom: 10px;
}

Fiddle

Bootstrap从父级继承高度和边距

1 个答案: