Question

为什么2个div互相溢出？我将视口宽度平均分为两个div。如果我给出49％，那么宽度为50％，那么代码工作正常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        .fity{
            width: 50vw;
            height: 100vh;
            float: left;        

        }
    </style>
</head>
<body>

<div class="fity" style="background:red;"></div>
<div class="fity" style="background:blue;"></div>
</body>
</html>

Answer 1

这是因为垂直滚动条。

MDN Information

视口百分比长度定义了相对于大小的长度   视口，即文档的可见部分。只要   基于Gecko的浏览器正在动态更新视口值，   修改视口大小时（通过修改视图的大小）   台式计算机上的窗口或通过电话转动设备   或平板电脑）。

结合overflow：auto，最终滚动条占用的空间   不是从视口中减去，而在视频的情况下   溢出：滚动，它是。 [我的重点]

如果你向身体添加inline，它就会被修复。 -

JSFiddle Demo

大众元素溢出

1 个答案: