Question

我正在构建一个固定宽度的网站（使用带有margin：auto的经典包装器），但我希望侧边栏背景扩展到屏幕的右端。

到目前为止，我已经完成了这个：

HTML

<div id="wrapper">
    <div id="left">Content area</div>
        <div id="right">
            <div id="actual-sidebar">
                Sidebar
            <span class="clearme"></span>
        </div>
    </div>
</div>

CSS

body {
    background: #333;
    color: #fff;
    overflow-x: hidden;
}

#wrapper {
    width: 500px;
    height: 1200px;
    margin: auto;
    border: 2px dashed #fff;
}

#left {
    width: 300px;
    height: 500px;
    float: left;
}

#right {
    width: 175px;
    height: 500px;
    margin-left: 325px;
    margin-right: -9999px;
    padding-right: 9999px;
    background: #777;
}

#actual-sidebar {
    width: 100%;
    height: 100%;
    border: 2px dotted #f0f;
}

你可以在这里看到它：
http://jsfiddle.net/knjDV/
http://www.spazionegativo.it/layout-test/

这种“全宽侧边栏”是否可以仅使用 css ？

在上面的示例中，实际的侧边栏宽度以粉色边框突出显示，其余部分均为填充和负边距;在Chrome中工作，但IE打破了它，所以我添加了 overflow-x：hidden 来修复它。

问题是，即使没有任何内容可供选择，向右拖动也会滚动视图，最终隐藏内容。我似乎无法解决这个问题。

是否修复了“拖动滚动”问题，或完全不同的方法来解决这个问题？

Answer 1

使用CSS3渐变作为主体的背景（与侧边栏颜色相同）来创建它延伸到屏幕边缘的错觉。

.sidebar {
  background: salmon;
}

body {
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #fa8072), color-stop(50%, #ffffff));
  background: -webkit-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: -moz-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: -o-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: linear-gradient(right, #fa8072 50%, #ffffff 50%);
}

Demo

Answer 2

如果添加到#right{ position: fixed;}，将删除水平滚动条。那可以接受吗？

是CSS，全宽侧边栏背景可能吗？

2 个答案: