html - bootstrap row height 100% issue -

html - bootstrap row height 100% issue -

i'm working on project using framework twitter bootstrap 3.

my basic html layout is.

sidebar main content

the sidebar element has 100% height , float: left div classed main-content stays inline.

when give sidebar float left property , add together row classed div in main-content div.

the height of .row goes crazy. instead of float: left if utilize position: fixed sidebar .row height gets adjusted according content within .row.

i did play web console in chrome , noticed there 2 pseudo elements created on row :before , :after.

when unchecked css property of pseudo classes height of .row height of child.

why have issue when utilize float: left sidebar?

how can overcome it?

did google on this, , found this. doesn't help me.

also i've created fiddle demonstrate unusual behaviour of .row classed div extends screen of height there's nil nowadays within .row element.

someone help me clarified , fixed.

thanks in advance.

edit : why height of .row div 100% when didn't define it's height?

i find mark-up bit odd considering working bootstrap. why don't create utilize of bootstrap functionality create sidebar , main content div? way don't run unwanted "100% height divs".

have look: http://jsfiddle.net/gea7n/3/

<div class="page-container"> <div class="row"> <div class="sidebar col-xs-4"> </div> <div class="main-content col-xs-8"> <div class="well custom-well"></div> <div style="background: red">content div not 100% height default</div> </div> </div> </div>

html css html5 css3 twitter-bootstrap