css - 左侧固定位置侧边栏 : 50%; moving off the left side on small window sizes

Question

我有一个固定位置的侧边栏:

.sidebar {
  position: fixed;
  top: 51px;
  left: 50%;
  min-height: 100%;
  width: 225px;
  margin-left: -470px;
  padding-top: 24px;
  background: url('images/side-bg.jpg') no-repeat;
  overflow: hidden;
  z-index: 20;
}

在 margin: 0 auto; 容器内:

#outside_container {
  position: relative;
  min-height: 100%;
  width: 1022px;
  margin: 0 auto;
}

到目前为止，带有负左边距的 left:50%; 技巧可以很好地使其与站点的其余部分居中。但是，当浏览器窗口大小缩小到小于站点宽度时，导航会向左移动，直到您再也看不到它为止。在这里试试:http://ravictilanding.cbstage.com/

我可以做些什么来阻止这种行为，同时保持它固定在正常宽度？

Answer 1

为什么侧边栏需要left: 50%, margin: -0.5width？您没有将侧边栏本身居中，只有容器 div 并且由 margin: 0 auto 处理。除非我遗漏了什么，否则您可以简单地不定义 left 并应用正 margin-left 将其从 #outsidecontainer 的边缘插入>。这有效并且似乎没有破坏 Chrome 中的任何内容，但我没有看过其他浏览器。