Mar
Mar

Reputation: 1606

How to keep a div's height 100%?

I have 2 grids: one side bar and one main section. I desire to have sidebar's div height 100%. However, the height of main section breaks that.. and I don't understand how/why that happens...

To be clear:

Page:

 <div class="wrap">

 <div class="section group">    

 <div class="col section_1_2">
    <div class="sideBar">sideBar</div>
 </div><!--section_1_2-->

 <div class="col section_2_2"> 
    <div class="layout">layout
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
 </div><!--section_2_2-->    

 </div><!--section group-->   

 </div><!--wrap-->

Css:

 *{margin:0;padding:0;}

 body,html{height:100%;}

 .wrap{
 width:100%;
 height:100%;
 }

 .sideBar{
 width:100%;
 height:100%;
 background:lightblue;
 }

 .layout{
 width:90%;
 height:auto;
 background:blue;
 margin:0 auto;
 }

 .layout span{
 width:200px;
 height:500px;
 background:yellow;
 display:block;
 clear:both;    
 }

 /* fluid grids */
 .section_1_2{
 width:20%;
 height:100%;
 }
 .section_2_2{
 width:80%;
 height:100%;
 }

 /* Grid settings*/
 .section{
 clear:both;
 padding:0;
 margin:0;
 height:100%;
 }
.group:before,
.group:after{
 content:"";
 display:table;
 }
.group:after{
 clear:both;
 }
.col{
 display:block;
 float:left;
 }

So what happens is: If I don't add these span tags(which is extra 2000px height), sidebar will appear correctly(100% height) but If I add long height content in layout it breaks the 100% height of sidebar..

So what happens here actually? What changes the height of the page or sidebar?

Please check here: http://jsfiddle.net/83noLsjv/1/

Probably this is something really simple but I can't see the solution to keep sidebar 100% height and at the same time add long content in layout...

Thank you in advance!

Upvotes: 0

Views: 455

Answers (3)

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

Another way to do it is to use overflow: auto on your main container that you want to scroll.

http://jsfiddle.net/MathiasaurusRex/vx7pzjd6/

Upvotes: 0

Nick Prozee
Nick Prozee

Reputation: 2913

Try to set your position to fixed of the sidebar in css.

position:fixed

Upvotes: 1

Nectarini
Nectarini

Reputation: 11

Height is calculated differently than width - "browsers don't evaluate height at all unless the content is so long that it goes outside of the view port".

The exact problem you are having here is described in this post: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Referring to: "The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing."

Upvotes: 1

Related Questions