[css] Bootstrap 3 - 100% height of custom div inside column

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.

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

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.

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).

Here is JS Fiddle

enter image description here

This question is related to css twitter-bootstrap

The answer is


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

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

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

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


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

.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