宽度：100％和宽度：100vw之间的差异？

Question

我必须在屏幕高度上安装iframe。显然，我想要100％的宽度，但由于这不起作用，我使用了100vh。 但是vh像vw并不完全是100％。 在我的笔记本电脑通过镀铬，而100％宽度完美呈现，而不需要水平滚动条，大众额外约1厘米。

Answer 1

vw和vh分别代表视口宽度和视口高度。

使用width: 100vw代替width: 100%之间的区别在于，虽然100%会使元素适合所有可用空间，但视口宽度有一个特定的度量，在这种情况下是宽度可用屏幕的包括文档边距。

如果设置样式body { margin: 0 }，则100vw的行为应与100％相同。

Answer 2

Havengard的答案似乎并不完全正确。我发现vw填充了视口宽度，但没有考虑滚动条。因此，如果您的内容高于视口（以便您的网站具有垂直滚动条），那么使用vw会产生一个小的水平滚动条。我不得不为width: 100vw切换width: 100%以摆脱水平滚动条。

Answer 3

您可以通过添加max-width来解决此问题：

#element {
   width: 100vw;
   height: 100vw;
   max-width: 100%;
}

当您使用CSS通过代码width: 100vw;使包装器全宽时，您会注意到页面中的水平滚动，这是因为{{1}和padding {1}}和margin标签已添加到包装尺寸中，因此解决方案是添加html

Answer 4

@Havenard's answer 为问题提供了完美的解释。除此之外，这还提供了差异的直观表示。

当您有一个带有滚动条的网站和一个应该适合整个屏幕宽度的元素时，您将能够注意到 100vw 和 100% 之间的主要区别。

选项 1

下面是一个相同的例子。
我在下面的代码中所做的就是将鼠标悬停在 <h1> 标签上时将其宽度从 100vw 更改为 100%。

body{
  /* margin: 0; */
}

.scroll{
  height: calc(110vh);
}

h1{
  width: 100vw;
  /* width: 100%;*/
  text-align:right;
  outline: 5px solid black
}

h1:hover{
  width: 100%;
}

h1:before{
  content: "100vw "
}

h1:hover:before{
  content: "100% "
}

<div class = "scroll">
  <h1>Width</h1>
</div>

如果您运行上面的代码片段并将文本悬停，您会注意到两件事：

1. 水平滚动条消失
2. 整个文本都将可见 给你

注意：运行上述代码段后，您可以在浏览器开发工具中使用上述代码来查看它如何影响元素

---

选项 2（Chrome 和 Edge）

.scroll{
height: calc(110vh);
display: flex;
align-items: baseline;
}

h1{
width: 100vw;
/* width: 100%; */
text-align:right;
outline: 10px solid black
}

<div class="scroll">
    <h1>Test</h1>
  </div>

另一种直观地查看您自己项目中的差异的方法是将 display:flex 样式设置为具有 100vw 的元素。

当您在浏览器 devtools 中突出显示此元素时，您会注意到元素右端有一个向左的箭头。您还可以看到突出显示元素的阴影跨越滚动条，表明它正在考虑整个屏幕宽度（包括滚动条宽度）

---

解决类似问题的其他问题是：

1. 100vw causing horizontal overflow, but only if more than one?
2. CSS Units - What is the difference between vh/vw and %?
3. Prevent 100vw from creating horizontal scroll

Answer 5

将ID用于iframe：

ID =＆＃34;框架＆＃34;所以它将是： <iframe id="frame"> 然后你需要将它添加到你的CSS：

#frame {
width:
height:
{