Question

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

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

position:fixed;

将其设置为

position:absolute;

将它放在div中并使其居中，但随后滚动。

有什么想法吗？

编辑：

如果我将位置设置为绝对位置，我希望侧边栏的行为与此相同。因此，如果我更改页面的大小，它会保持在内容旁边，并且不会与内容重叠。

Answer 1

要将固定元素放在另一个div中（在你的情况下为.container），你需要给固定元素一个左右：0;和左边距和右边：自动如下图所示。父元素的位置需要是相对的，就像你已经正确完成一样。所以只需更新左，右，边距左边和边距右边，你就可以了！

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

我在这里更新了你的小提琴：

http://jsfiddle.net/8SdK2/

Answer 2

这样做的一种方法是在position:fixed;及其内部使用容器，如果它在<body>中，则设置您的元素。 http://codepen.io/anon/pen/hJxnf

（额外的css作为测试滚动的背景和高度）

html,body {
  background:#333;
  height:200%;
}
body, p {
  background:yellow linear-gradient(to bottom,yellow 50%,lightgray 50%);
  width:800px;
  margin:auto;
}
#fixed {
  position:fixed;
  top:0;
  left:0;
  width:100%;
}

<div id="fixed">
  <p> center </p>
</div>

中心体内的静态侧边栏？

2 个答案: