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
This question is related to
css
twitter-bootstrap
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