宽度：100%和宽度：100VW之间的差异？
我必须在屏幕高度上安装iframe。显然，我想要100%的宽度，但，因为这不起作用，我使用100VH。但像大众这样的vh并不完全是100%。在我的笔记本电脑通过chrome虽然100%的宽度呈现完美不需要水平滚动条，大众有大约一厘米额外。
共有1个答案
vw和vh分别代表视区宽度和视区高度。
使用widthes:100vw而不是widthes:100%的区别在于，虽然100%将使元素适合所有可用空间，但视口宽度有一个特定的度量值，在本例中是可用屏幕的宽度，包括文档边距。
如果设置样式body{margin:0}，100vw的行为应该与100%相同。
使用vw作为网站中所有内容的单位，包括字体大小和高度，将使网站始终与设备的屏幕宽度成比例地显示，而不管其分辨率如何。这使得它超级容易确保您的网站在工作站和移动端都正确显示。
您可以在bodyCSS中设置font-size:1vw（或适合项目的任何大小），并且rem单元中指定的所有内容都将根据设备屏幕自动缩放，因此很容易将现有项目甚至框架（如Bootstrap）移植到这个概念中。
-
问题内容： 我必须在屏幕高度上安装iframe。显然，我希望宽度为100％，但是由于这种方法不起作用，因此我使用了100vh。但是像vw这样的vh并不完全是100％。在我的笔记本电脑中，通过镀铬虽然100％的宽度可以完美呈现而不需要水平滚动条，但vw大约可以增加一厘米。 问题答案： vw和vh分别代表视口宽度和视口高度。 使用代替的区别在于，虽然将使元素适合所有可用空间，但视口宽度具有特定的度量，
-
问题内容： 当我有一个with时，它并不是100％： 现在，当您调整窗口大小时，会有一个水平滚动条，然后向右滚动，则背景消失了。在这种情况下如何保持背景？ 现在，当您调整窗口大小并向右滚动时，您将不再看到背景。如何解决这个问题？ 问题答案： 100％值是父级宽度或视口的100％。请参阅文档。
-
当其容器具有flex显示时，将元素设置为flex:50%和width:50%之间的区别是什么。结果似乎是一样的： http://codepen.io/anon/pen/KAbof
-
我已经读了几篇flexbox教程，但我仍然无法使这个简单的任务发挥作用。 我怎样才能使红框达到100%的宽度？ 代码： 样式： 谢谢！ 更新1：Nishanth Shankar的建议，为包装器添加flex:1，flexDirection:'row' 输出： 代码：
-
我有两个面板，一个是边栏，100%高，100px宽（紫色），我还有一些按钮（橙色），然后我有一个右面板，顶部div是100%宽，100px高（绿色），这个面板包含3个右浮动按钮（灰色）。 现在在这个顶部面板下方，我有一个内容div，应该是剩余宽度的100%和剩余高度的100%（黄色），但是当您添加更多侧边栏按钮（橙色按钮）时，黄色面板会在底部插入一个白色边框，如果您调整浏览器窗口的大小，它也水平放
-
问题内容： 我有这个设置： HTML ： CSS ： 通过此设置，它可以在iPhone上运行，但不能在浏览器中运行。 是因为我已经在meta中，也许已经在？ 问题答案： 我发现最好的方法是为较旧的浏览器编写默认CSS，因为较旧的浏览器包括5.5、6、7和8。无法读取@media。当我使用@media时，我会这样使用： 但是，您可以使用@media进行任何操作，这只是为所有浏览器构建样式时最适合我的