html自动滚动列表,html – CSS如何使滚动列表

我正在尝试创建一个由标题组成的网页，并在标题栏中列出项目列表。我希望项目列表是可垂直滚动的。我也希望网页占据整个窗口，但不要更大。 currenlty我的问题是项目列表不可滚动，而是延伸到窗口的底部，这导致窗口是可滚动的。 css属性在html，body，头和列表项上应该是什么？

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")

Bellow是我现在的样式表

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;

}