Question

请考虑以下页面：http://www5.atpages.jp/~syockit/testFixed.html

我正在创建一个页面，页眉，页脚和中间容器，左侧和右侧导航栏以及中间的内容区域。问题是，我希望内容的滚动条位于窗口的右侧，而不是内容区域的右侧（因此它可以遵循最大化模式中的Fitt定律）。使用当前样式，右侧导航栏覆盖滚动条，使其不可见。

我注意到如果启用整页的滚动条（即<body>），导航栏将向左移动。因此，一种解决方案是使用<iframe>作为内容。但有没有办法让右侧导航栏向左移动以适应滚动条，而不需要使用iframe？

请参阅www5.atpages.jp/~syockit/testIframe.html，例如使用iframe。

Answer 1

您的div＃内容正在向右扩展，您必须更改：此

#content {
   padding-right: 150px
}

到这个

#content {
  margin-right: 150px;
}

Answer 2

是的，经过多一点实验，我终于找到了答案！经测试适用于Chrome 11，Firefox 4，Opera 11。

CSS：

.middle { position: absolute; left: 120px; overflow: auto; }
.content { padding-right: 150px; }
.middle, .right-sidebar { top: 100px; bottom: 50px; }
.right-outer { float: right; }
.right-sidebar { position: fixed;}
.right-outer, .right-sidebar {  width: 150px; }

HTML：

<div class='middle'>
  <div class='right-outer'>
    <div class='right-sidebar'>
      Sidebar content goes here.
    </div>
  </div>
  <div class='content'>
  Content goes here.
  </div>
</div>

您可以在此处查看工作演示：http://jsfiddle.net/b4kPm/2/

编辑：哎呀，它在Opera 11中不起作用！我想知道出了什么问题......

编辑2：Opera的绝对定位不会考虑滚动条。不得不使用float: right。

编辑3：正如我想的那样......当内容被动态更改为没有溢出内容时，它不会自动重新调整。这仅适用于页面加载或内容重新呈现。

如何在不隐藏滚动条的情况下放置右侧导航栏？

2 个答案: