Css 为什么在元素之间指定100%的视口宽度会破坏外观？

我正在尝试使用CSS3视口设计一个两列主题。我的css和html看起来像-

*{
    padding:0;
    margin:0;
}
#one{
    width: 20vw;
    height: 100vh;
    float: left;
}

#two{
    width: 80vw;
    height: 100vh;
    float: left;
}

<div id="one">one</div>
<div id="two">two</div>

一

---

两个这是因为愚蠢的浏览器忽略了视口单位的滚动条。这意味着你的两个div组成了所有可用的屏幕空间，但是滚动条也需要它的空间。所以Div2将进入一个新的系列

例如，Mozilla上就有相关的问题

---

将元素高度设置为视口高度的100%时，将显示垂直滚动条。垂直滚动条使视口变窄，从而使元素包裹。解决此问题的一种方法是在body元素上设置overflow-y:hidden，以防止滚动条出现：

* { 填充：0； 保证金：0； } 身体{ 溢出y：隐藏； } 一个{ 宽度：20vw； 高度：100vh； 浮动：左； } 两个{ 宽度：80vw； 高度：100vh； 浮动：左； } 一 两个您需要添加

他是保罗写的一篇关于它的文章

*{ 框大小：边框框； 填充：0； 保证金：0 } ：根，主体{宽度：100vw；高度：100vh} 一，二{ 浮动：左； 高度：100vh } 一个{ 宽度：20vw； 背景：红色 } 两个{ 宽度：80vw； 背景：绿色 } 一 二 这将高度设置为100vh，这意味着它将其设置为视口的高度

使用20vw和80vw等于100vw意味着将其置于另一个之下是合乎逻辑的，因为vw是100%

*{
    padding:0;
    margin:0;
}
#one{
    width: 20vw;
    height: 100vh;
    float: left;
}

#two{
    width:79vw;
    height: 100vh;
    float: left;
}

试试这个

height: 100vh;

*{
    padding:0;
    margin:0;
}
#one{
    width: 20vw;
    height: 100vh;
    float: left;
}

#two{
    width:79vw;
    height: 100vh;
    float: left;
}