假设我在一行中有两列。
一个包含一个使用class =“img-responsive”的流体图像图像，另一个列有一个自定义div块。
我的问题是如何获得这个自定义div的高度100％。下面没有为我工作。
height: auto; max-width: 100%;
如果我在高度上设置固定值，它不会很好地与
包含图像的列作为图像在视口大小更改时调整高度。
我可以通过做一些像以前的问题建议的事情，得到列高度相等。
class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
但我的情况略有不同，我需要使用自定义div里面的列
设置与图像高度相等的高度，而不是父divs(列)。
这里是JS Fiddle
解决方法
2种方式：
显示表：
你可以把行转成显示：table和col-into：display-table-cell。它的工作buuuut的表的限制，有那些限制是推拉和偏移将不工作。另外，我不知道你在哪里使用这个 – 在什么断点。你应该使图像全宽，并将其包装在另一个容器中，以填充在那里。此外，你需要弄清楚移动设计，这是为768像素及以上。当我使用这个，我重新声明大小，有时我坚持importants在他们，因为表承担其内容的宽度，因此具有再次宣布的宽度有助于这一点。你需要玩耍。我也使用一个脚本，但你必须更改较少的文件使用它，否则它不会响应地工作。
.row.table-row > [class*="col-"].custom {
background-color: lightgrey;
text-align: center;
}
@media (min-width: 768px) {
img.img-fluid {width:100%;}
.row.table-row {display:table;width:100%;margin:0 auto;}
.row.table-row > [class*="col-"] {
float:none;
float:none;
display:table-cell;
vertical-align:top;
}
.row.table-row > .col-sm-11 {
width: 91.66666666666666%;
}
.row.table-row > .col-sm-10 {
width: 83.33333333333334%;
}
.row.table-row > .col-sm-9 {
width: 75%;
}
.row.table-row > .col-sm-8 {
width: 66.66666666666666%;
}
.row.table-row > .col-sm-7 {
width: 58.333333333333336%;
}
.row.table-row > .col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.row.table-row > .col-sm-3 {
width: 25%;
}
.row.table-row > .col-sm-2 {
width: 16.666666666666664%;
}
.row.table-row > .col-sm-1 {
width: 8.333333333333332%;
}
}
HTML
<div class="container">
<div class="row table-row">
<div class="col-sm-4 custom">
100% height to make equal to ->
</div>
<div class="col-sm-8 image-col">
<img src="http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1" class="img-fluid">
</div>
</div>
</div>
绝对bg div
演示：http://jsbin.com/aVEsUmig/2/edit
内容高于及低于以下内容的演示：http://jsbin.com/aVEsUmig/3
.content {
text-align: center;
padding: 10px;
background: #ccc;
}
@media (min-width:768px) {
.my-row {
position: relative;
height: 100%;
border: 1px solid red;
overflow: hidden;
}
.img-fluid {
width: 100%
}
.row.my-row > [class*="col-"] {
position: relative
}
.background {
position: absolute;
padding-top: 200%;
left: 0;
top: 0;
width: 100%;
background: #ccc;
}
.content {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
padding: 10px;
}
}
HTML
<div class="container">
<div class="row my-row">
<div class="col-sm-6">
<div class="content">
This is inside a relative positioned z-index: 1 div
</div>
<div class="background"><!--empty bg-div--></div>
</div>
<div class="col-sm-6 image-col">
<img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1" class="img-fluid">
</div>
</div>
</div>
