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;'d容器中：

#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中的任何内容，但我没有看过其他浏览器。

左侧固定位置侧边栏：50％;在小窗口尺寸上移动左侧

1 个答案: