Html 在特定区域内滚动页面内容？

我正在设计一个网站，在固定宽度布局的外边缘有固定元素。中间的一个div是为内容保留的

当用户滚动时，我希望所有内容（除了上述固定的外部导航元素）都位于该中心元素的边界内

下面是我的意思的一个快速模型：

我可以很容易地将中心元素的溢出属性设置为auto，并将所有内容都保留在内部。但是，滚动条不能出现在元素的边缘，这一点非常重要

基本上，我想知道如何：

• 将内容限制在该区域 （也许我可以改变尺寸和尺寸 主体元素的定位是 允许吗？--然后是位置 外部的固定元素 身体
• 隐藏显示的滚动条 使用时在div内 溢出：自动

---

非常感谢您的帮助！

如果可能的话，您应该将固定位置元素分为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>

你可以看到

还要注意内容区域上的位置：relative（相对）。这是因为z-index工作正常，并且内容显示在固定部分的下方

如果你关心IE6/7的支持，你就需要添加一个新的浏览器来让固定位置在那些很棒的浏览器中正常工作

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 */
}