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 - 工作，但无法使用，因为我的网站使用em来调整#a和其他元素的大小。对我来说不是一个可行的解决方案。
使#b成为块状元素，或降低它的高度 - 有效，但对我的网站不可行。

因此，如果您能够提出有关如何删除滚动条的任何想法（或者更确切地说，删除滚动条的原因），我希望听到它们。

Answer 1

可以通过将vertical-align元素的inline-block属性更改为top之类的值来删除滚动条。 default vertical-align value is baseline，这就是元素与底部对齐的原因（导致滚动条）..

Updated Example

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

内联块显示不必要的滚动条

1 个答案: