javascript - css 100 ボーダー付きの高さ

Question

html/css/javascriptを使ってカードリストを書いています。
2 つのサンプル実装を次に示します:

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/

1 つには境界線があり、もう 1 つには境界線がないことがわかります。
ボーダーのあるものには、含めたくないy-asixスクロールバーがあります。
それを取り除く方法は？

Answer 1

図のように変更overflow-y:autoするだけです。overflow-y:hidden;

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

}

これがデモです

Answer 2

box-sizing: border-box（および）を使用-moz-box-sizingして、ボックスモデルの幅/高さの計算に境界線を含めます。

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