style div attribute html css pug

html - div - CSS cómo hacer lista desplazable



title label html (1)

Estoy tratando de crear una página web que se compone de un encabezado y debajo del encabezado una lista de elementos. Quiero que la lista de elementos se pueda desplazar verticalmente. También me gustaría que la página web ocupara toda la ventana pero no fuera más grande. Actualmente, mi problema es que la lista de elementos no es desplazable y, en cambio, se extiende muy por debajo de la parte inferior de la ventana y esto hace que la ventana sea desplazable. ¿Cuáles deberían ser las propiedades CSS en los elementos html , body , header y list ?

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 es la hoja de estilo actual que tengo

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


Según su pregunta, la lista vertical tiene un efecto de barra de desplazamiento.

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>