滚动特定区域内的页面内容？

Question

我正在设计一个网站，该网站在固定宽度布局的外边缘上具有固定元素。中心的div用于内容保留。

当用户滚动时，我希望所有内容（除了所说的固定外部导航元素）都停留在该中心元素的边界内。

这是我的意思的快速模型：

我可以很容易地将center元素的overflow属性设置为auto，并将所有内容保留在里面。但是，非常重要的一点是，该元素的边缘上不能出现滚动条。

基本上，我想知道如何：

• 将内容限制在该区域内（也许我可以更改body元素的大小和位置-是否允许？-然后将固定元素放置在body之外。
• 隐藏使用溢出时在div内显示的滚动条：自动

任何帮助将不胜感激！

Answer 1

如有可能，应将固定位置元素分成4个单独的部分（顶部，左侧，右侧和底部）。然后只需确保按内容区域的宽度和高度将内容区域居中，这样内容就不会重叠：

的HTML

<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>

<div id="content">
  <!-- Your content -->
</div>

的CSS

html, body {
  height: 100%;   
}

#top, #left, #right, #bottom {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  background: red;
}

#top, #bottom {
  width: 100%;
  height: 20px;
}

#bottom {
  top: auto;
  bottom: 0;
}

#left, #right {
  height: 100%;
  width: 20px;
}

#right {
  left: auto;
  right: 0;
}

#content {
  position: relative;
  z-index: 1;
  padding: 25px; /* prevent content from being overlapped */
}

您可以在此处查看它的运行情况。

还要注意位置：相对于内容区域。这样可以使z-index正常工作，并且内容显示在固定部分的下方。

如果您关心IE6 / 7支持，则需要添加CSS表达式修复程序，以使固定位置在那些很棒的浏览器中正常工作。