CSS how to make scrollable list

Asked 24/2, 2014 at 20:48 Answered 3/8, 2019 at 14:36

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 CSS properties be on the html, body, header and list items?

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 is the current style sheet I have

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

Upwards answered 24/2, 2014 at 20:48 Comment(2)

Do you want the list to fit the window vertically, or it will have a fixed height? – Alumna 24/2, 2014 at 20:53

i want the list to fit take up as much vertical height as is possible without causing the window to be bigger than the browser window – Upwards 24/2, 2014 at 20:59

163

As per your question vertical listing have a scrollbar effect.

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>

Lauraine answered 24/2, 2014 at 21:2 Comment(6)

That works great except how can i make the height of the nav be dynamic, such that it takes up as much space as it can but wont casue the page to be bigger than the window – Upwards 24/2, 2014 at 21:13

okay to make it dynamic you can define max-height:100%; min-height:500px lets assume 500px; height:500px; here again the height property define for IE older browser. – Lauraine 24/2, 2014 at 21:18

^did not work, it just caused the list to take up as much space as it needs and exeeds the window bounds – Upwards 24/2, 2014 at 21:27

min-height:200px;height:200px; max-height:auto; Here min-height is necessary to define. It tells that once the content exceed the 200px limit then show the scrollbar. max-height should be auto or 100%. I hope it will solve your problem. – Lauraine 24/2, 2014 at 21:34

best to use max-height and then it will not scroll until it needs to. – Hyperpituitarism 29/7, 2015 at 15:0

Also better to use overflow-y:auto; along with max-height – Gondola 14/12, 2015 at 8:34

Another solution would be as below where the list is placed under a drop-down button.

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

Florella answered 3/8, 2019 at 14:36 Comment(2)

Are you suggesting that OP load a massive CSS framework just to create a scrollable list? – Buoy 3/8, 2019 at 14:43

No I am not however the snippet uses some bootstrap 4 if I am not mistaken – Florella 3/8, 2019 at 14:47

Recommended topics

Hot tags