我有一些非常简单的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>那是因为内联元素的空白边距。
在这里，我使用了margin-bottom: -4px;hack（还有更多）来删除它。但是请注意，在使用此 hack 时，您需要根据当前字体大小检查它并相应地进行调整。
如果您确实需要内联块，请使用vertical-alignhack
更好的方法是使用flex或float（以支持旧浏览器）。
这是 margin-bottom: -4px;
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
margin-bottom: -4px;
}
#left {
background-color: red;
}
#right {
background-color: green;
} <span id="left"></span><span id="right"></span>这是 flex
body {
height: 100vh;
margin: 0;
display: flex;
}
span {
height: 100%;
width: 50%;
}
#left {
background-color: red;
}
#right {
background-color: green;
}<span id="left"></span><span id="right"></span>这是 float
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
float: left;
}
#left {
background-color: red;
}
#right {
background-color: green;
}<span id="left"></span><span id="right"></span>