html - 使 html 列表 100% 高度带边框

Question

我需要制作一个 100% 高度的列表，以及 20% 的每个列表项。我能够做到这一点。但是当在每个列表项的底部添加边框时，列表变得超过 100% 高度并出现滚动条。

如何使带边框的列表适合屏幕高度？

html,body {height:100%; margin:0;}
.list {
    width: 200px;
	height:100%;
}
.list ul {
	height:100%;
	margin: 0;
	padding:0;
	list-style: none;
}
.list ul li {
	border-bottom: 1px solid #000; /* Scrollbar appears with this*/
	height:20%;
}
.list ul li a {
	text-decoration: none;
	display: block;
	padding: 1em 1em 1em 0.2em;
	color:#000;
}
.list ul li a:after 
{
    content:"»";
    float:right;
}

<div class="list">
	<ul>
        <li><a href="#">List 1</a></li>
        <li><a href="#">List 2</a></li>
        <li><a href="#">List 3</a></li>
        <li><a href="#">List 4</a></li>
        <li><a href="#">List 5</a></li>
   </ul>
</div>

Answer 1

尝试将此添加到您的 .list ul li 中:

box-sizing: border-box;