CSS如何制作可滚动列表

Question

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

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

下面是我当前的样式表

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;
}

Answer 1

另一种解决方案如下，将列表放置在下拉按钮下方。

  <button class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown"
    >Markets<span class="caret"></span></button>

    <ul class="dropdown-menu", style="height:40%; overflow:hidden; overflow-y:scroll;">
      {{ form.markets }}
    </ul>

Answer 2

根据您的问题，垂直列表具有滚动条效果。

CSS / HTML：

nav ul{height:200px; width:18%;}
nav ul{overflow:hidden; overflow-y:scroll;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
        <header>header area</header>
        <nav>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li> 
                <li>Link 7</li> 
                <li>Link 8</li>
                <li>Link 9</li>
                <li>Link 10</li>
                <li>Link 11</li>
                <li>Link 13</li>
                <li>Link 13</li>

            </ul>
        </nav>
        
        <footer>footer area</footer>
    </body>
</html>