Halving a div and to be 100% high

Question

I am using Boostrap 3 and have split my website up into sections where each DIV is 100% height of the browser window. Now I am using the generic grids and columns in Bootstrap 3 but I want an image with height 100% and width 30% of the div on left of content

I am really struggling to understand where the code goes?

![<div id='imgDiv2'>


<div class="container">

    <div class="row">


            <div class="col-md-8">



                <div class="panel panel-default" style=" border: 0; box-shadow: none;">
                    <div class="panel-body" style="font-size: 30px;font-weight: 300;"></div>
                </div>

                <div class="panel panel-default" style=" border: 0; box-shadow: none;">
                    <div class="panel-body" style="font-size: 30px;font-weight: 300;">about me</div>
                </div>

           </div>   


        <div class="col-md-4">

                <div class="panel panel-default" style=" border: 0; box-shadow: none;">
                    <div class="panel-body" style="font-size: 30px;font-weight: 300;"></div>
                </div>

           </div>           


</div>

So in the example the content on the right would still need to sit in the col-md-8 or whatever the width I need it to be.

Answer 1

I think you have a misunderstanding of how % heights work in css.

An element is always 100% high, the 100% refers to the elements's own height, not the parent elements height.

Also, html doesnt do columns properly yet, which is a common metaphor in the print world.

To do what you need, you probably need some jquery / other javascript to detect which of the two divs has the greater height, and set the height of the lesser to the height of the greater.

You then have two options for the image: css background or html img tag in the left area (col-md-4 in this case)

On another note, the markup you provided isnt like the image underneath (the markup gives a left area thats twice the size of the right area)