html - 带有溢出背景颜色的侧边栏

Question

我想制作包含页眉、内容(主要区域和侧边栏)和页脚的标准布局。右侧边栏不仅在它们内部有背景颜色，而且这个背景我想在所有主体上溢出(包括页眉和页脚)。

它应该是这样的:

我的想法是通过绝对 block :before 侧边栏创建的，但是当我用溢出主体将它定位为绝对时，它会产生滚动(垂直和水平)。

aside.sidebar:before {
   content: "";
   display: block;
   position: absolute;
   background-color: #eee;
   top: -9999px;
   left: 0;
   bottom: -9999px;
   right: -9999px;
   z-index: -1;
}

代码:http://jsfiddle.net/cichy380/yrk40e1h/1/ (基于 Twitter Bootstrap)

也许您有更好的主意或者您可以修复我的代码？

Answer 1

你应该避免那种 -9999px 之类的东西。

http://jsfiddle.net/yrk40e1h/7/

@media (min-width: 768px){
    .sidebar:before {
        content: '';
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        background-color: #eee;
        overflow: hidden;
        margin-left: -15px;
        z-index: -1;
    }
}

负 margin-left 在这里处理 Bootstrap columns 填充。尝试了一些方法来解决这个问题，如果有人有比这个负边距更更干净的解决方案，非常欢迎您发表评论。

@media (min-width: 768px) 用于处理 Bootstrap 响应列。如果没有这个，当你缩小到 768px 以下时，所有这些 :before 都会占用所有的 body 。