不必要的滚动条显示为嵌入式块

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/

问题是，即使假定没有元素溢出，也会出现不必要的垂直滚动条。我熟悉导致每个元素之间出现空格的常规两行内嵌代码相邻问题，但这似乎很难破解。

我想到的是：

• 删除HTML中的所有空格
• overflow:hidden启用#a-有效，但无法用于我的网站（用户必须能够在需要时滚动内容）
• font-size:0上#a-工作，但不能用的，因为我的网站使用emS代表上浆#a等元素。对我来说不是一个可行的解决方案。
• 制作#b块状元素或降低其高度-可行，但对我的网站不可行。

因此，如果您能提出有关如何删除滚动条（或更确切地说，删除滚动条的原因）的想法，我想听听他们的意见。

Answer 1

可以通过将元素的vertical-align属性更改inline-block为值来删除滚动条top。该缺省vertical-align值是baseline，这就是为什么该元件正被对准于底部（导致滚动条）..

更新示例

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