title: How to code a scrolling frame in css
body: <p>Using the page in the link below as an example, I am trying to figure out how to code the page so the header stays static, and only the information in the body would scroll when a user scrolls up and down, rather then the whole page however I cannot figure it out. I understand it can be done with frames however I was wanting to do it without it.</p>
  
  <p>example page:
  <a href="http://matthewjamestaylor.com/blog/perfect-full-page.htm" rel="nofollow">http://matthewjamestaylor.com/blog/perfect-full-page.htm</a></p>
  
  <p>=========================</p>
  
  <p>Thank you. Editing it I'm sure I'm just missing something simple I just cannot figure out what to change to the fixed code. Here is the header code I am using.</p>
  
  <pre><code>/* Header styles */
  #header {
      clear:both;
      float:left;
      width:100%;
  }
  #header {
      border-bottom:1px solid #04B45F;
  }
  #header p,
  #header h1,
  #header h2 {
      padding:.4em 15px 0 15px;
      margin:0;
  }
  #header ul {
      clear:left;
      float:left;
      width:100%;
      list-style:none;
      margin:10px 0 0 0;
      padding:0;
  }
  #header ul li {
      display:inline;
      list-style:none;
      margin:0;
      padding:0;
  }
  #header ul li a {
      display:block;
      float:left;
      margin:0 0 0 1px;
      padding:3px 10px;
      text-align:center;
      background:#eee;
      color:#fff;
      text-decoration:none;
      position:relative;
      left:15px;
      line-height:1.3em;
  }
  #header ul li a:hover {
      background:#369;
      color:#fff;
  }
  #header ul li a.active,
  #header ul li a.active:hover {
      color:#000;
      background:#fff;
      font-weight:bold;
  }
  #header ul li a span {
      display:block;
  }
  </code></pre>