title: CSS how to make scrollable list
body: <p>I am trying to create a webpage which is made up of a header and bellow the header a list of items. I want the list of items to be vertically scrollable. I also would like the webpage to take up the entire window but not be bigger. Currently my problem is the list of items is not scrollable and instead extends far below the bottom of the window and this is causing the window to be scrollable. What should the <em>CSS</em> properties be on the <em>html</em>, <em>body</em>, <em>header</em> and <em>list items</em>?</p>
  
  <pre><code>doctype html
  html
      head
          link(href="css/style.css" rel="stylesheet")
      body
          div#wrapper
              h1 Interactive Contact Directory
              div(class="tools")
                  |Search: 
                  br
                  input(type="text" id="searchBox")
                  select(name="searchBy" id="searchBy")
                      option(value='firstname') First Name
                      option(value='lastname') Last Name
                      option(value='email') Email
                  br
                  br
              div(id="listingHolder")
                  ul(id="listing")
              div(id="listingView")
  </code></pre>
  
  <p>Bellow is the current style sheet I have</p>
  
  <pre><code>html{
      height: 100%;
  }
  body {
      background:#121212;
      margin:0px;
      padding:0px;
      font-family:"Open Sans", sans-serif;
      height: 100%;
  }
  #wrapper {
      max-height: 100%;
  }
  h1 {
      margin:0px;
      color:#fff;
      padding:20px;
      text-align:center;
      font-weight:100;
  }
  .tools {
      text-align:center;
      color:#fff;
  }
  #searchBox {
      padding:7px;
      border:none;
      border-radius:5px;
      font-size:1.2em;
  }
  a.filter {
      display:inline-block;
      padding:5px 10px;
      margin:5px;
      background:#0472C0;
      color:#fff;
      text-decoration:none;
      border-radius:3px;
  }
  a.filter:hover {
      background:#0B9DE0;
      color:#fff;
  }
  ul#listing {
      list-style:none;
      padding:0px;
      margin:0px;
      background:#fff;
      width:100%;
  }
  ul#listing li {
      list-style:none;
      border-bottom:1px solid #eee;
      display:block;
  }
  ul#listing li .list-header {
      padding:10px;
      cursor:pointer;
      display:block;
  }
  
  ul#listing li .list-header:hover {
      background:#7893AB;
      color:#fff;
  }
  ul#listing li .list-header.active {
      background:#447BAB;
      color:#fff;
  }
  ul#listing li .details {
      display:none;
      background:#efefef;
      padding:20px;
      font-size:0.9em;
  }
  #listingHolder{
      width: 50%;
      overflow: scroll;
  }
  </code></pre>