IE7 div position fixed

I have a div which needs to fill out the height of the browser's viewport,but still says in the same position when the user scrolls the web page up and down. position: fixed; does this, but I am unable to use it as it's making the overflow scroll bar of the div jerky and slow. Is there an position or method that I can use so for example I currently have:

div.panel {
  position: absolute;
  top: 36px; 
  right: 0;
  overflow: auto;
  b开发者_高级运维ackground: #636362;
  padding: 0 0 20px 0px;
  width: 290px;
  height: 100%;
}

---

I'm not sure what you mean with "jerky and slow", because all scrollbars act the same. This is how I would resolve your issue:

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

Works in at least IE7, IE8 and Firefox.