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

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

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

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


我可以很容易地将中心元素的溢出属性设置为自动，并将所有内容保留在里面。但是，该元素的边缘不存在滚动条非常重要。

基本上，我想知道如何:

限制该区域的内容
(也许我可以改变大小和
body 元素的定位 -- 是
那允许吗？ -- 然后定位
外部的固定元素
body 。

隐藏出现的滚动条
使用时在 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>

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

你可以看到它 in action here 。

还要注意position:relative于内容区域。这使 z-index 正常工作并且内容显示在固定部分下方。

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

关于html - 在特定区域内滚动页面内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3399875/