Menu
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
612
The principle is : add the "tablefull" on a main DIV. then implicitly, the DIV below will create rows. and then DIV below the rows will be cells.
col- (extra small devices - screen width less than 576px) . col-sm- (small devices - screen width equal to or greater than 576px) . col-md- (medium devices - screen width equal to or greater than 768px)
That is because you have align-items: center for the flexbox in which case it will default to the content height. What you need to do is to remove that (let align-items: stretch come into play as it is the default) and also remove the height:100% from CASideBorder .
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 If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
