2

I'm building a fixed width website (using the classic wrapper with margin:auto), but I want the sidebar background to extend to the right end of the screen.

So far I've accomplished this:

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;
}

​ You can see it in action here:
http://jsfiddle.net/knjDV/
http://www.spazionegativo.it/layout-test/

Is this kind of "full-width sidebar" possible using css only?

In the example above, the actual sidebar width is highlighted by the pink border, and the rest is all padding and negative margin; worked in chrome but IE broke it so I've added overflow-x: hidden to fix it.

The problem is, click-dragging to the right will scroll the view even if there's nothing to select, eventually hiding the content. I can't seem to get past this problem.

Is there a fix to the "drag-n-scroll" issue, or an entirely different way to accomplish this?

4

2 回答 2

0

使用 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%);
}​

演示

于 2012-10-24T01:59:32.003 回答
0

如果你添加#right{ position: fixed;}到那将摆脱水平滚动条。这可以接受吗？

于 2012-10-24T02:23:47.920 回答