引导3 - 100%自定义div在列内高度

Let's say I have two columns in a row.

假设有一行两列。

One contains an image using class="img-responsive" for fluid image and the other column next to has a custom div block.

其中一个包含一个使用class="img-responsive"的动态图像的图像，另一个列旁边有一个自定义div块。

My question is how to get this custom div's height 100%. Below didn't work for me.

我的问题是如何得到这个自定义div的高度100%。下面的内容对我没用。

height: auto;
max-width: 100%;

If I set fixed value in height, it won't play nicely with the column containing image as the image resizes height when the viewport size changes.

如果我在高度中设置了固定值，那么当viewport大小改变时，当图像调整高度时，它就不能很好地处理包含图像的列。

I can get the columns heights equal by doing something like the following as suggested by previous questions.

我可以按照前面的问题所建议的那样做一些事情，使列的高度相等。

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

But my case is slightly different that I need to use custom div inside the column that sets equal height with the image height, not the parent divs (columns).

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

Here is JS Fiddle

这是JS小提琴

4 个解决方案

#1

The original question is about Bootstrap 3 and that supports IE8 and 9 so Flexbox would be the best option but it's not part of my answer due the lack of support, see http://caniuse.com/#feat=flexbox and toggle the IE box. Pretty bad, eh?

最初的问题是关于Bootstrap 3，它支持IE8和ie9，所以Flexbox将是最好的选择，但由于缺乏支持，这不是我的部分答案，请参见http://caniuse.com/#feat= Flexbox和切换IE框。很糟糕,不是吗?

2 ways:

1. Display-table: You can muck around with turning the row into a display:table and the col- into display:table-cell. It works buuuut the limitations of tables are there, among those limitations are the push and pull and offsets won't work. Plus, I don't know where you're using this -- at what breakpoint. You should make the image full width and wrap it inside another container to put the padding on there. Also, you need to figure out the design on mobile, this is for 768px and up. When I use this, I redeclare the sizes and sometimes I stick importants on them because tables take on the width of the content inside them so having the widths declared again helps this. You will need to play around. I also use a script but you have to change the less files to use it or it won't work responsively.

1。显示表:您可以将行转换为display:table和col- into display:table-cell。它起作用，但是表的限制是存在的，其中的限制是推拉和偏移不会起作用。另外，我不知道你用的是什么——在什么断点。您应该使图像全宽，并将其包装在另一个容器中，以在那里放置填充。另外，你需要在手机上找到设计，这是768px和up。当我使用这个时，我重新声明大小，有时我把重要的内容放在它们上面，因为表的宽度与其中的内容相同，因此再次声明宽度将有助于实现这一点。你需要到处玩玩。我也使用脚本，但是您必须更改较少的文件来使用它，否则它将无法响应。

---

DEMO: 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

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. Absolute bg div

DEMO: http://jsbin.com/aVEsUmig/2/edit

DEMO with content above and below: 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

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>

#2

I was just looking for a smiliar issue and I found this:

我只是在找一个smiliar的问题我发现

.div{
  height : 100vh;
}

more info

更多信息

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side

#3

You need to set the height of every parent element of the one you want the height defined.

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

<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

JsFiddle例子

#4

My solution was to make all the parents 100% and set a specific percentage for each row:

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

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

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