inline-block 出现不必要的滚动条
Unnecessary scrollbars appear for inline-block
在编写网站代码时,我偶然发现了一些奇怪的东西。
这是我的代码:
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/
问题是出现了一个不必要的垂直滚动条,尽管 none 的元素应该会溢出。我熟悉导致元素之间出现空白的常规两行块相邻问题,但这似乎有点难以破解。
我想到的:
- 删除 HTML
中的所有空格
overflow:hidden
on #a
- 有效,但不能用于我的网站(用户必须能够在需要时滚动内容)
font-size:0
on #a
- 有效,但无法使用,因为我的网站使用 em
s 来调整 #a
和其他元素的大小。对我来说不是一个可行的解决方案。
- 制作
#b
块状元素,或降低它的高度 - 可行,但对我的网站不可行。
因此,如果您能想出任何关于如何删除滚动条的想法(或者更确切地说,删除滚动条的 原因),我想听听他们的意见。
可以通过将 inline-block
元素的 vertical-align
属性 更改为 top
等值来删除滚动条。 default vertical-align
value is baseline
,这就是元素对齐到底部的原因(导致滚动条)..
#b {
display: inline-block;
vertical-align: top;
height: 100%;
background: red;
width: 50%;
}
在编写网站代码时,我偶然发现了一些奇怪的东西。
这是我的代码:
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/
问题是出现了一个不必要的垂直滚动条,尽管 none 的元素应该会溢出。我熟悉导致元素之间出现空白的常规两行块相邻问题,但这似乎有点难以破解。
我想到的:
- 删除 HTML 中的所有空格
overflow:hidden
on#a
- 有效,但不能用于我的网站(用户必须能够在需要时滚动内容)font-size:0
on#a
- 有效,但无法使用,因为我的网站使用em
s 来调整#a
和其他元素的大小。对我来说不是一个可行的解决方案。- 制作
#b
块状元素,或降低它的高度 - 可行,但对我的网站不可行。
因此,如果您能想出任何关于如何删除滚动条的想法(或者更确切地说,删除滚动条的 原因),我想听听他们的意见。
可以通过将 inline-block
元素的 vertical-align
属性 更改为 top
等值来删除滚动条。 default vertical-align
value is baseline
,这就是元素对齐到底部的原因(导致滚动条)..
#b {
display: inline-block;
vertical-align: top;
height: 100%;
background: red;
width: 50%;
}