css - 如何保持div的高度100%？

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

那么会发生什么:如果我不添加这些跨度标签(这是额外的 2000 像素高度)，侧边栏将正确显示(100% 高度)但是如果我在布局中添加长高度内容，它会打破 100% 的高度侧边栏..

那么这里实际上发生了什么？什么改变了页面或边栏的高度？

请在这里查看:http://jsfiddle.net/83noLsjv/1/

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

提前致谢!

Answer 1

尝试在 css 中将侧边栏的位置设置为固定。

位置:固定