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

Question

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

Answer 1

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