Question

我有2个网格：一个侧栏和一个主要部分。我希望侧边栏的div高度为100％。然而，主要部分的高度打破了..我不明白为什么/为什么会发生......

要明确：

页：

 <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;
 }

所以会发生的情况是：如果我不添加这些span标签（额外的2000px高度），侧边栏将正确显示（100％高度）但是如果我在布局中添加长高度内容则会打破100％的高度侧边栏..

那么这里到底发生了什么？是什么改变了页面或侧边栏的高度？

请点击此处：http://jsfiddle.net/83noLsjv/1/

这可能是非常简单但我看不到保持侧边栏100％高度并同时在布局中添加长内容的解决方案...

提前谢谢！