我有一些非常简单的html / css,它在一个body标签上使用100vh,并且在两个内联块跨度上使用100％(或100vh,我已经尝试了两种),每个跨度的宽度为50vw.我希望看到两个并排的跨度,每个占据屏幕的一半,每个都和屏幕一样高 – 没有滚动条,没有空白区域.身体也有0的余量来帮助这个.我看到的是我所期望的,只是有一个小的垂直滚动条.我还从身体内部删除了所有空格,因为我知道这可以增加超过100％宽度的空间.但是我无法弄清楚为什么我会得到滚动条……我知道我可以添加一个溢出：隐藏到正文并且滚动条消失了,但是再次 – 为什么滚动条在第一位？
这是html文件：
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
</style>
</head>
<body><span id="left"></span><span id="right"></span></body>
</html>
解决方法
不幸的是,这是内联元素的本质.您需要添加vertical-align：top以强制不使用行高和其他与字体相关的间距.
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
