Bootstrap 3 – 列内的自定义div的高度 – 100％
假设我有两列连续。
一个包含使用class="img-responsive"的stream体图像的图像，另一个栏旁边有一个自定义的div块。
我的问题是如何获得这个自定义div的高度100％。 下面没有为我工作。
height: auto; max-width: 100%;
如果我将高度设置为固定值，则当视口大小更改时，图像调整高度时，将无法与包含图像的列一起正常播放。
根据前面的问题，我可以通过执行类似于以下的操作来获得列高度相等的结果。
class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; } .row { overflow: hidden; }
但是我的情况略有不同，我需要使用自定义div内的列设置与图像高度相等的高度，而不是父div（列）。
这是JS小提琴
原来的问题是关于Bootstrap 3，并支持IE8和9，所以Flexbox将是最好的select，但由于缺乏支持，它不是我的答案的一部分，请参阅http://caniuse.com/#feat=flexbox并切换IE框。; 很不好，呃？
2种方式：
1.显示表格：您可以将行转换为显示：表格和列表显示：表格单元格。 它的工作原理buuuut表的限制是存在的，其中限制是推拉和偏移将无法正常工作。 另外，我不知道你在哪里使用这个 – 在什么断点上。 您应该使图像完整宽度，并将其包装在另一个容器中，以将填充放在那里。 此外，你需要弄清楚移动devise，这是为768px及以上。 当我使用这个，我重新声明的大小，有时我坚持重要的是因为表格占据了内部的宽度，所以宽度声明再次有助于这一点。 你将需要玩耍。 我也使用一个脚本，但你必须改变较less的文件使用它，否则将无法响应。
演示： http : //jsbin.com/EtUBujI/2
.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>
2.绝对BG格
DEMO： 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>
我只是在寻找一个微妙的问题，我发现这一点：
.div{ height : 100vh; }
更多信息
vw: 1/100th viewport width vh: 1/100th viewport height vmin: 1/100th of the smallest side vmax: 1/100th of the largest side
您需要设置要定义高度的每个父元素的高度。
<html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> Make this division 100% height. </p> </div> </body> </html>
文章。
JsFiddle的例子
我的解决办法是让所有的父母100％，并为每一行设置一个特定的百分比：
html, body,div[class^="container"] ,.column { height: 100%; } .row0 {height: 10%;} .row1 {height: 40%;} .row2 {height: 50%;}
