视口单元大众重叠 - 每个视口少于 100 个大众？答案

【问题标题】：Viewport unit VW overlaps - less than 100 vw per viewport?视口单元大众重叠 - 每个视口少于 100 个大众？
【发布时间】：2014-10-24 16:26:32
【问题描述】：

据我了解，1vw 是视口宽度的 1/100，因此给定视口中有 100vw。但是，当我有两个宽度为 25vw 的 div 时，一个位于距右边缘 25vw 的位置，一个位于距左边缘 25vw 的位置时，它们重叠很多。这适用于多个浏览器，为什么会这样？

#sign_up_button{
    position: fixed;
    padding: none;
    top: 68vh;
    right: 25vw;
    width: 25vw;
    border: solid;
}
#login_button{
    position: fixed;
    top: 68vh;
    left: 25vw;
    width: 25vw;
    border: solid;
}

<div id="sign_up_button">Test</div>
<div id="login_button">Test</div>

【问题讨论】：

标签： css html viewport-units

【解决方案1】：

您需要在宽度本身中包含边框大小：实际上您的 div 宽度是25vw + <border size>，所以使用box-sizing 属性以便在宽度定义中包含边框

div {
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

【讨论】：