不必要的滚动条出现在内嵌块

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%; 
}