100vh 和 100vw 与浏览器窗口的当前大小相比 [英] 100vh and 100vw compared to the current size of the browser window

问题描述

有很多页面在讨论 vh 和 vw 与百分比的关系.(顺便说一句，我在 Chrome 上运行).在我看来，100vw 应该意味着浏览器窗口的确切大小，无论我是扩大还是缩小它——当我在 100vw 的 div 周围绘制边框时，它确实与该宽度匹配.然而，100vh 总是溢出屏幕底部.我玩过:

There are lots of pages discussing vh and vw versus percentage. (I'm running on Chrome btw). In my mind, 100vw should mean the exact size of the browser window no matter whether I expand it or shrink it -- and when I draw a border around a div that's 100vw, IT DOES match that width. HOWEVER, 100vh ALWAYS overflows the bottom of the screen. I've played with:

html, body {
  height: 100%;
  width: 100%;
}

and 

html, body {
  height: 100vh;
  width: 100vw;
}

当我在 100vw 和 100vh 的 div 周围绘制边框时，框会溢出屏幕底部.

and when I draw a border around a div that's 100vw and 100vh, the box overflows the bottom of the screen.

我在这里错过了什么(如果有的话)?对我来说，100vh 是当前浏览器窗口大小的底部，而不是一个像素.

WHAT (if anything) am I missing here? To me 100vh goes to the bottom of the currently browser window size and not a pixel more.

提前致谢

推荐答案

添加 *, *::before,*::after { box-sizing: border-box;} 在文件的开头，边框现在将成为宽度的一部分，就像填充一样.

Add *, *::before,*::after { box-sizing: border-box; } at the start of your file, the border will now be part of the width, like the padding.

检查那里:https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

默认情况下，box-sizing 设置为 content-box，这意味着当您设置:

By default, the box-sizing is set to content-box, that mean that when you set:

width: 100px;
padding: 20px;
border: 5px;

总宽度为 100 内容 + 20 填充 + 两次 5(左边框为 5，右边框为 5)= 130px;

如果您将 box-sizing 设置为 border-box，它将在宽度中包含边框和内边距

The total width will be 100 of content + 20 padding + twice 5 (5 for border-left, and 5 for border-right) = 130px;

因此宽度将始终是您设置的宽度，无论边框和填充如何，它都会自动计算内容的宽度:100px - 20px - 2 * 5px = 70px;

If you set the box-sizing to border-box it will include the borders and padding in the width

示例:

这篇关于100vh 和 100vw 与浏览器窗口的当前大小相比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！