固定位置的div

Question

我有一个带有样式位置的div：固定，我希望它向下滚动页面，但我不希望div溢出到页面页脚。我怎么能做到这一点？

提前谢谢， 肖恩

Answer 1

试试这个。

CSS

body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/
.mainBody {height:90%;overflow:auto;}

HTML

  <div style="border:1px solid black;">TOP</div>
  <div class="mainBody">
      <div style="height:800px;"></div> <!-- To for scroll -->
      HERE IS Main Body
  </div>

这会将滚动条从窗口传输到显示内容的div。 TOP div将保留在您想要的位置，因此您可以将其放置在原处或保持原样，并且永远不会与您的页脚碰撞，您可以将它放在主体div中。

Answer 2

我过去遇到过同样的问题，并使用Javascript onscroll事件来检测position：fixed元素是否会与页脚冲突。如果是，我将其更改为position：absolute，顶部属性恰好在页脚重叠之上。

然后，当他们开始向上滚动页面并且它不再与页脚重叠时，我将其更改回位置：已修复。

另外，如果您计划在IE6中滚动此元素，我建议将CSS expressions用于position：fixed emulation。