HTML – 100vh导致滚动条？

发布时间：2021-01-02 08:27:20 所属栏目：资源来源：网络整理

导读：我有一些非常简单的html / css,它在一个body标签上使用100vh,并且在两个内联块跨度上使用100％(或100vh,我已经尝试了两种),每个跨度的宽度为50vw.我希望看到两个并排的跨度,每个占据屏幕的一半,每个都和屏幕一样高 – 没有滚动条,没有空白区域.身体也有0的余

我有一些非常简单的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>

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!