css - 使用填充停止无序列表比父 div 高

Question

我有一个与页面一样高的无序列表。我不希望它与 div 的两侧齐平，所以我添加了填充。除了现在它正在溢出。我怎样才能使列表与它的父级减去填充一样高？

HTML

<div class="wrapper">
    <div class="menu"></div>
    <div class="content">
        <ul class="list">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</div>

CSS

/* Clear any defaults on the ul */
ul {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* Make a container that fills the entire screen */
.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    background: hotpink;
}

/* Left hand 200px wide menu */
.menu {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    width: 200px;
    background: blanchedalmond;
}

/* Fill the remaining width of the screen. */
.content {
    margin: 0 0 0 200px;
    height: 100%;
    overflow: auto;
    padding: 10px;
    background: mistyrose;
}

/* 200px wide that shouldn't be taller than it's container */
.list {
    width: 200px;
    border: 1px solid orchid;
    box-sizing: border-box;
    list-style: none;
    height: 100%;
}

http://jsfiddle.net/8A2un/

Answer 1

添加 box-sizing: border-box 到 .content。

http://jsfiddle.net/8A2un/1/