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，并将其作为假装全高度列。

例如

.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中尝试这个，可以尝试使用负边距技巧。

你设置你的容器，溢出设置为隐藏，然后在每个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>

给侧边栏提供全高度

1 个答案: