宽度:100%和宽度:100vw之间的差异？

Question

宽度:100%和宽度:100vw之间的差异？

alo*_*jiv 37 css html5 css3

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

Answer 1

Hav*_*ard 76

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

使用width: 100vw而不是使用width: 100%虽然100%将使元素适合所有可用空间,但视口宽度具有特定度量,在这种情况下是可用屏幕的宽度,包括文档边距.

如果设置样式body { margin: 0 },则100vw的行为应与100%相同.

还要注意它的宽度:100%是相对于它的第一个具有布局的父级.因此,如果您在另一个具有特定宽度的元素中有一个宽度为100%的元素,则子元素将仅占用该父元素的总宽度. (12认同)
我只是注意到将元素设置为100vw会导致在显示垂直滚动条时出现水平滚动条。根据[我可以使用]（http://caniuse.com/#feat=viewport-units），只有Firefox通过从'100vw'中减去滚动条宽度来表现出正确的行为。对于其他所有浏览器，您将需要改用“ 100％”。 (3认同)
这是（现在？）不正确的。[当前编辑器草稿文档状态](https://drafts.csswg.org/css-values-3/#viewport-relative-lengths) 视口长度必须忽略滚动条和 [MDN 附加文档](https://developer .mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths），这仅适用于溢出：自动；如果溢出设置为滚动（滚动条始终可见），那么视口长度确实尊重它们（我自己在草稿中没有看到）。100% 引用父元素而不是视口，因此在任何情况下都不会忽略滚动条。 (2认同)
据我所知，利润率的差异是不正确的。当我将子项设置为 100% 宽度或 100vw 宽度并从正文中添加和删除边距时，它们的行为方式相同。 (2认同)
“100vw 的行为应该与 100% 相同。”，如果右侧有滚动条，则不会。 (2认同)

Answer 2

小智 36

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

/sf/ask/1635714181/ntal-overflow-but-only-if-more-than-one (2认同)

Answer 3

小智 8

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

\n

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

Run Code Online (Sandbox Code Playgroud)\n

当您使用 CSS 使用代码使包装器全宽width: 100vw;时，您会注意到页面中出现水平滚动，这是因为padding\ marginxc2\xa0 html\xc2\xa0and\xc2\xa0 body\xc2\xa0tags 添加到包装器大小，所以解决方案是添加\xc2\xa0max-width: 100%

\n

归档时间：	11 年前
查看次数：	70318 次
最近记录：	7 年前