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

Answer 2

请尝试以下代码：

html,body {height:100%; margin:0;overflow:hidden;}
.list {
    width: 200px;
	height:100%;
}
.list ul {
	height:100%;
	margin: 0;
	padding:0;
	list-style: none;
}
.list ul li {
	border-bottom: 1px solid #000;
    box-sizing:border-box;
	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 3

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

$(document).ready(
    function(){
        $("#click").click(
            function() {

                var count = prompt("How many joao's do you want to appear?");
                var int = setInterval(
                    function(){
                        if(count==1){
                            clearInterval(int);
                        }
                        $("body").append("<p class='add'>joaoao</p>");
                        $(".add").fadeIn();
                        count--;
                    }
                    ,800);
            }
        );
    }
);

Answer 4

使用box-sizing属性。

box-sizing: border-box;