Bootstrap Column, 100% height doesnt apply

Question

So, im using bootstrap 3.0, and working on columns, and im having problem with column heights.

My desired output is to have white border in between column, i was able to achieve this on columns with same height, but if the columns is shorter in height, the border is short also,

I tried setting the columns' height to 100%, but is doesnt work, setting the column's height via exact px (100px) works, but i cant use this since i need the column height to be responsive

Here is my html code

            <div class="col-xs-12 bg-8560a9">
                <div class="col-xs-4 text-left border-right-white full-height">Europe Zone 1 (West)</div>
                <div class="col-xs-4 border-right-white full-height">
                    <div class="col-xs-6">794 M</div>
                    <div class="col-xs-6">81.6%</div>
                </div>
                <div class="col-xs-4 full-height">
                    <div class="col-xs-6">833 M</div>
                    <div class="col-xs-6">83.5%</div>
                </div>
            </div>

css

.full-height{height:100% !important;}

Answer 1

This is the common Problem that occurs when parent element don't have there heights set, height and width don't behave same for Browser,you can skip setting width but for element height this is generic issue

suppose your parent element has height: auto; and setting percentage height to children will confuse browser to calculate height for element from an undefined value,since it is null so browser will do nothing.

you need to add

 <div class="col-xs-12 bg-8560a9 full-height">
            <div class="col-xs-4 text-left border-right-white full-   height">Europe Zone 1 (West)</div>
            <div class="col-xs-4 border-right-white full-height">
                <div class="col-xs-6">794 M</div>
                <div class="col-xs-6">81.6%</div>
            </div>
            <div class="col-xs-4 full-height">
                <div class="col-xs-6">833 M</div>
                <div class="col-xs-6">83.5%</div>
            </div>
        </div>

this will again work only if parent element height is set,

full reference to this problem is here

So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined.