【问题标题】：Bootstrap 3 - 100% height of custom div inside columnBootstrap 3 - 列内自定义 div 的 100% 高度
【发布时间】：2014-01-13 10:20:52
【问题描述】：

假设我连续有两列。

一个包含使用class="img-responsive" 的图像作为流体图像，而旁边的另一列有一个自定义 div 块。

我的问题是如何让这个自定义 div 的高度达到 100%。下面对我不起作用。

height: auto;
max-width: 100%;

如果我将高度设置为固定值，它将无法与包含图像的列，因为当视口大小发生变化时，图像会调整高度。

按照前面问题的建议，我可以通过执行以下操作来使列高度相等。

class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.row {
    overflow: hidden; 
}

但我的情况略有不同，我需要在列中使用自定义 div 设置与图像高度相等的高度，而不是父 div（列）。

这里是JS Fiddle

【问题讨论】：

你试过身高：100%； ?如果有，你看到了什么？
是的，我也试过了。什么也没发生。
能提供Js fiddle吗？
我想我应该这样做..很快就会用小提琴更新。
我刚做了这个js fiddle

标签： css twitter-bootstrap

【解决方案1】：

我只是在寻找一个类似的问题，我发现了这个：

.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

【讨论】：

vh 是用视口高度而不是父div来调整大小
是的，它用于引导程序，它应该使用视口才能工作
嗯，这实际上似乎可以在我的引导列中正常工作，简单而好。 vh 代表什么，视口高度？
如果兄弟列之一变得更高的问题，这将打破
对我的项目不正确，但对有用信息 +1 点赞

【解决方案2】：

最初的问题是关于 Bootstrap 3 并且支持 IE8 和 9，因此 Flexbox 将是最佳选择，但由于缺乏支持，它不是我的答案的一部分，请参阅 http://caniuse.com/#feat=flexbox 并切换 IE 框。很糟糕，嗯？

2 种方式：

1.展示台： 您可以通过将行转换为 display:table 并将 col- 转换为 display:table-cell 来解决问题。它可以工作，但表的限制是存在的，其中的限制是推拉和偏移不起作用。另外，我不知道你在哪里使用它——在什么断点。您应该使图像全宽并将其包裹在另一个容器中以将填充放在那里。此外，您需要弄清楚移动设备上的设计，这是针对 768px 及以上的。当我使用它时，我会重新声明尺寸，有时我会在它们上面贴上重要信息，因为表格占据了它们内部内容的宽度，因此再次声明宽度有助于这一点。你需要到处玩。我也使用脚本，但您必须更改较少的文件才能使用它，否则它将无法响应。

演示：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 div

演示：http://jsbin.com/aVEsUmig/2/edit

上面和下面内容的DEMO：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>

【讨论】：

非常感谢。你的回答很明确，很准确。正如您所提到的，我需要稍微尝试一下这个概念，以便在较小的设备上显示。
IE 8 搞砸了列之间的所有填充，因此您必须解决问题。这是一个想法：jsbin.com/EtUBujI/3/edit - 你使用 ie8 hack 来添加 :before 占用列的高度并在那里放置一个模拟列填充的假分隔线。作为显示表格，此位置基于表格，而不是单元格，因此您必须在布局完成后定位它。到处玩。我最终得到了一个 jQuery 解决方案，因为 IE8 困扰着我。
我在这个答案中添加了另一个选项，它可能在 IE8 中效果更好并且更容易处理。
作为记录，我认为在这个答案中不包括 display: flex 是非常错误的。当 flexbox 可以完成这项工作时，你永远不应该使用 display: table。

【解决方案3】：

您需要设置要定义高度的每个父元素的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        Make this division 100% height.
      </p>
    </div>
  </body>
</html>

Article.

JsFiddle example

【讨论】：

这是一篇很好的文章，解释了身高的工作原理webdesign.about.com/od/csstutorials/f/…
这是否适用于 bootstrap 3，即 OP 的要求？

【解决方案4】：

我的解决方案是让所有的父母都是 100%，并为每一行设置一个特定的百分比：

html, body,div[class^="container"] ,.column {
    height: 100%;
}

.row0 {height: 10%;}
.row1 {height: 40%;}
.row2 {height: 50%;}

【讨论】：