0

我的页面中有两个 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%。我怎么能得到那个？

4

1 回答 1

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>
于 2012-07-25T10:07:11.413 回答