css - "Pinned-down"水平位置灵活的菜单

Question

我正在尝试制作这样的固定样式菜单:

http://www.w3.org/Style/Examples/007/menus

除了我希望水平定位更灵活。

我知道我可以用“右:”中的百分比值而不是常量来做到这一点，但我希望菜单能够像边栏一样紧贴在居中的博客布局中，这意味着当调整页面大小时，侧边栏不应覆盖内容。同样，如果我把页面变大，盒子不应该从内容中散开。

有什么方法可以只用 css 来做到这一点？如果没有，也许是一个简单的 javascript 解决方案？

Answer 1

这是使用一些通用代码执行此操作的一种方法:

HTML:

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

CSS:

在容器和内容上设置明确的宽度，为容器中的侧边栏留出空间。将容器水平居中。

#container {
  width: 200px;
  margin: 0 auto;
}

#content {
  width: 150px;
}

现在我们要position: fix侧边栏相对于页面的中心，而不是相对于页面的右边缘。使它成为容器中剩余空间的宽度，并给它一个margin-left(或padding-left，这取决于您可能想用它做的其他事情) 等于内容的宽度。然后设置 right: 50%(对于右侧边栏，将这些值切换为 left 对于左侧边栏)和 margin-right 为负二分之一容器宽度:

#sidebar {
  width: 50px;
  margin-left: 150px;
  position: fixed;
  right: 50%;
  margin-right: -100px;
  /* other styles such as "top", etc. */
}

调整窗口大小，它会紧贴内容并垂直放置在您放置的任何位置。

这是一个 fiddle (为了视觉清晰，有一些额外的样式):http://jsfiddle.net/blineberry/UkEkS/