css - 给侧边栏全高

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

我希望这个侧边栏(左边部分)一直到我页面的末尾(直到底部)。我已将高度设置为 100%，但当我最小化浏览器时，它会在栏下方显示空白区域，而不是显示蓝色背景。我的意思是它不把它的高度作为 100%。我怎样才能得到它？

Answer 1

对于全长侧边栏，您最好的选择可能是旧的人造列方法。您可以在 CSS 中执行此操作，但这对您来说可能更容易。

基本上，将您想要的图像与您的专栏背景放在一条细长条中。然后，您将其作为背景图像添加到您的父级 div，它充当假装的全高列。

例如。

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

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

您可以在此处阅读更多相关信息 - http://www.alistapart.com/articles/fauxcolumns/

如果你想在 CSS 中尝试这个，你可以尝试负边距技巧。

您将容器设置为 overflow hidden ，然后在每个 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>