不必要的滾動條出現在內嵌塊

Question

當我編寫一個網站時，偶然發現了一些奇怪的東西。

這裏是我的代碼：

HTML

<div id='a'><div id='b'></div></div> 

CSS

html{height:100%} 
body 
{ 
    margin: 0; 
    height: 100%; 
    background: green; 
    padding: 0 5%; 
} 
#a 
{ 
    height: 100%; 
    background: blue; 
    text-align: center; 
} 
#b 
{ 
    display: inline-block; 
    height: 100%; 
    background: red; 
    width: 50%; 
} 

而且一的jsfiddle，以防萬一：http://jsfiddle.net/ud3y1vh2/

的問題是，出現不必要的垂直滾動條即使沒有任何元素可能溢出。我熟悉普通的兩行內嵌塊 - 接近彼此的問題，這會導致元素之間出現空白，但這似乎有點棘手。

我已經想到了：

• 上#a刪除任何和所有的空格在HTML
• overflow:hidden - 作品，但不能用於我的網站（用戶必須能夠在需要時滾動內容）
• font-size:0 on #a - Works，但無法使用，因爲我的網站使用em s來確定尺寸#a和其他元素。對我來說不是一個可行的解決方案。
• 製作#b塊類型的元素，或降低它的高度 - 工作，但不適合我的網站。

所以，如果你能想出如何刪除滾動條任何想法（或者更確切地說，除去原因滾動條的），我想聽到他們的聲音。

Answer 1

滾動條可以通過將inline-block元素的vertical-align屬性更改爲值，如top來刪除。的default vertical-align value is baseline，這就是爲什麼該元件正被對準於底部（導致滾動條）..

Updated Example

#b { 
    display: inline-block; 
    vertical-align: top; 
    height: 100%; 
    background: red; 
    width: 50%; 
}