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