充分高度侧边栏

Question

我在我的页面两个div：leftpart和rightpart它具有以下的css：

.leftpart{ 
     width:280px; 
     background:#0054a6; 
     color:#fff; 
     padding-top:40px; 
     height:100%; 
     min-height:637px; 
     box-shadow:3px 3px 10px #bebebe; 
     position:relative; 
} 
.rightpart{ 
     width:75%; 
     padding-left:10px; 
} 

我想这个侧边栏（leftpart），直到我的网页端（至底部） 。我已将高度设置为100％，但是当我最小化浏览器时，它会在条形图下方显示空白区域，而不是显示蓝色背景。我的意思是它没有把它的高度作为100％。我怎么弄到的？

Answer 1

对于一个完整的侧边栏，你最好的选择可能是旧的虚拟列方法。你可以在CSS中做到这一点，但这对你来说可能更容易。

把基本上你想要一个图像与你的列背景在一个细长条。然后，将其作为背景图像添加到您的父级div，并用作假装完整高度的列。

例如。如果你想尝试这种在CSS，你可以尝试切缘阴性招http://www.alistapart.com/articles/fauxcolumns/

-

.container { 
    background: url(your_image) repeat-y left top; 
} 

<div class="container"> 
    <div class="sidebar">SIDEBAR</div> 
    <div class="content">CONTENT</div> 
</div> 

你可以阅读更多关于它在这里。

您将容器的溢出设置为隐藏，然后在每个div上添加负边距底部和相等的正底部填充底部。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     SIDEBAR 
    </div> 
    <div class="col2"> 
     CONTENT 
    </div> 
</div>