html - 居中主体内的静态侧边栏？

Question

http://jsfiddle.net/6wCyr/544/

我正在尝试创建一个不随页面其余部分滚动的固定侧边栏。到目前为止我所做的工作，但我也希望它在带有标题和内容 div 的主容器中居中。

您可以在 jsfiddle 中看到，如果您展开预览框，标题和内容居中但侧边栏不居中，因为我已将其设置为:

position:fixed;

设置为

position:absolute;

将它放在 div 中并将其居中，然后滚动。

有什么想法吗？

编辑:

如果我将位置设置为绝对位置，我希望侧边栏表现得像它一样。因此，如果我更改页面的大小，它会紧挨着内容而不与其重叠。

Answer 1

要在另一个 div 中定位一个固定元素(在你的例子中是 .container)，你需要给固定元素一个 right 和 left: 0;和 margin-left 和 right:auto 如下所示。父元素的位置需要是相对的，就像你做的一样。所以只需更新 left、right、margin-left 和 margin-right 就可以了!

.sidebar {
position:fixed;
min-height: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
background:#b6ff00;
border-radius: 20px ;
}

我在这里更新了你的 fiddle :

http://jsfiddle.net/8SdK2/