HTML C 100vh导致滚动条？

发布时间：2024-06-10 08:33:16 所属栏目：资源来源：DaWei

导读： 我有一些非常简单的html / css,它在一个body标签上使用100vh,并且在两个内联块跨度上使用100％(或100vh,我已经尝试了两种),每个跨度的宽度为50vw.我希望看到两个并排的跨度,每个占据屏幕的一

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

（编辑：财气旺网 - 财气网）

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