我的页面中有两个 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%。我怎样才能得到它?
最佳答案
对于全长侧边栏,您最好的选择可能是旧的人造列方法。您可以在 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>
关于css - 给侧边栏全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11647355/