Reputation: 1606
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
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
Reputation: 2913
Try to set your position to fixed of the sidebar in css.
position:fixed
Upvotes: 1
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