Question

我有一个div需要填写浏览器视口的高度，但当用户上下滚动网页时仍然会说相同的位置。位置：固定;这样做，但我无法使用它，因为它正在制作div生涩和缓慢的溢出滚动条。是否有我可以使用的职位或方法，例如我目前有：

div.panel {
  position: absolute;
  top: 36px; 
  right: 0;
  overflow: auto;
  background: #636362;
  padding: 0 0 20px 0px;
  width: 290px;
  height: 100%;
}

Answer 1

我不确定你对“生涩而缓慢”的意思，因为所有的滚动条都是一样的。这就是我如何解决您的问题：

HTML：

<div class="fixed">I'm fixed!</div>
<p>Rest of page</p>

CSS：

html, body {
  /* make sure the page is at least height of viewport */
  height: 100%;
}
body {
  /* because the fixed div is no part of the flow, 
     make sure it is not overlapping the webpage  */
  padding: 0 0 0 100px;
}
.fixed {
  height: 100%;
  width: 100px;
  left: 0;
  position: fixed;
  background: #e0e0e0;
  /* only vertical-scrolling, but can be changed of course */
  overflow-y: scroll;
}

JSfiddled Live example

至少适用于IE7，IE8和Firefox。

IE7 div位置固定

1 个答案: