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

Question

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

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

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

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

基本上，我想知道如何:

• 将内容限制在该区域 (也许我可以改变尺寸和 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 */
}

可以看到in action here .

还要注意内容区域的position:relative位置。这样 z-index 才能正常工作并且内容显示在固定部分下方。

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