css 100帶邊框的高度

Question

我正在使用html/css/javascript寫一個卡片列表。
下面是這兩個示例實現：

http://jsfiddle.net/235Tp/

#wrapper { 
    background: #EEE; 
    width: 100%; 
    height: 100%; 
} 

#cards-div { 
    background: green; 
    width: 100%; 
    height: 70%; 
    overflow-y:auto; 
} 

#cards-list { 
    width: 100%; 
    height: 100%; 
} 

#cards-list li { 
    vertical-align: middle; 
    text-align: center; 
    height: 100%; 
    width: 20%; 
    float: left; 
    background: #EEE; 
    margin-left: -14%; 
    border: 1px solid #000; 
} 

#cards-list li:first-child { 
    margin-left: 0; 
} 

http://jsfiddle.net/scctk/

你可以看到一個有邊界的，而另一個沒有。
帶邊框的人有一個我不想包含的y-asix滾動條。
如何刪除？

Answer 1

使用box-sizing: border-box（和-moz-box-sizing）具有包括在寬度/高度計算邊界的盒子模型。

http://jsfiddle.net/235Tp/3/

Answer 2

只需簡單地如圖所示改變overflow-y:auto到overflow-y:hidden;：

#cards-div { 
background: green; 
width: 100%; 
height: 70%; 
overflow-y:hidden; 

}

這裏是DEMO