HTML – 100vh导致滚动条?

前端之家收集整理的这篇文章主要介绍了HTML – 100vh导致滚动条?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些非常简单的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>
原文链接:https://www.f2er.com/html/227490.html

猜你在找的HTML相关文章