我正在尝试创建一个由标题组成的网页,并在标题下面列出项目列表.我希望项目列表可以垂直滚动.我也希望网页占据整个窗口但不会更大.目前我的问题是项目列表不可滚动,而是远远低于窗口底部,这导致窗口可滚动.CSS属性应该在html,正文,标题和列表项上应该是什么？
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;
}
Khe*_*dey 107
根据您的问题,垂直列表具有滚动条效果.
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>