Question

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

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

这是我的意思的快速模型： alt text http://i35.tinypic.com/15s3cax.png

我可以非常轻松地将center元素的overflow属性设置为auto，并将所有内容保留在内部。但是，在该元素的边缘不存在滚动条非常重要。

基本上，我想知道如何：

限制该区域的内容（也许我可以改变大小和身体元素的定位 - 是允许吗？ - 然后是位置固定元素在...之外体。
隐藏显示的滚动条在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。

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

如果您关心IE6 / 7支持，则需要添加CSS expression fix才能在这些 awesome 浏览器中正常工作。

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

1 个答案: