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