问题标签 [viewport-units]

我正在尝试使用基于 flexbox 的布局来为我的页面获取粘性页脚。这在 Chrome 和 Firefox 中运行良好，但在 IE11 中，页脚位于我的主要内容之后。换句话说，主要内容不会被拉伸以填满所有可用空间。

vh当在 IE中测量容器高度单位时，如何让主要元素在 flex 布局中拉伸？我想看看这种行为是否是 IE 实现 flexbox 规范的方式中的一个错误的结果，但我在其他地方找不到任何关于这个问题的提及。

JSFiddle 演示

我计划在视口单元（vh，vw）上使用一些具有高度和字体大小的 div 构建一个单页滚动站点。

我知道旧浏览器上存在一些支持问题，但我对使用vminpoly增加页面负载不感兴趣，因为我发现它很笨重，而且我对非常过时的浏览器支持并不着迷。

另一方面，Buggyfill可能是跨浏览器兼容性的较小但部分解决方案。

另一种解决方案可能是测试编写在css-tricks上的支持，然后使用 jQuery 调整受影响元素的大小：

您支持视口单位的方法是什么？

您知道另一种合理的浏览器兼容性的简单解决方案吗？

我认为使用相对单位开始我的新项目是个好主意。当我在处理它时，我正在检查 chrome 仿真，以确保在这些设备上一切正常，并且看起来不错。

然后我把它推到heroku，它在我的macbook上看起来不错，但是当我把它实际加载到我的iPad上时，我想把它扔出窗外......

我正在使用 VH 单位。我怀疑这可能是问题所在？

可能还有其他一些潜在的问题，但我不确定如何调试我的问题，因为在模拟器上一切看起来都很好，但在设备本身上却没有。我现在已经花了大约三个小时，非常感谢一些帮助。

谢谢你！

对于 Safari，以下内容不起作用，谁能指出我做错了什么？

Safari 单独支持所有方法。-webkit-calc 也无济于事。

谢谢！

尝试在 div 上使用 100 vw 和 100vh 制作全屏帧。我在这个 JSfiddle中有 2 个，你可以看到每个框架的底部和右侧都有额外的空间。

有没有办法使用 vw 和 vh 并在没有额外空间的情况下完美契合？

CSS看起来像这样：

*编辑：似乎将宽度设置为 100% 可以解决这个问题，但是这个解决方案合适吗？它会破坏任何东西吗？

我的页面顶部有一个图像滑块，它被设置为适合 vh 的屏幕。

当我查看它在 iPhone 上的外观时，肯定有问题。图像拉伸，所以我必须滚动很多..请帮忙。

这是我的代码：

CSS：

我在 Safari 上遇到了一个非常小众的 CSS 问题。

我有以下 CSS 规则：

这适用于 Chrome，但 Safari 似乎不喜欢 和 的calc组合vh。（例如，如果我用 替换它，它会起作用vh——%但我确实需要根据vh或一些适当的替代方法进行计算。）

有什么办法可以解决这个问题吗？或者，是否有另一种在 Safarivh上友好的引用方式？calc

我正在使用视口高度以使 div 获取所有视口。但它在 iOS 中不起作用。我有很长的 div 代替。

这是代码：

我正在尝试使用 CSS3 列来模拟 Windows 8 横向滚动和多列布局，但我希望列具有固定宽度，或者就像我在小提琴中所做的那样，视口宽度。

现在，无论我使用哪种单位，似乎列都会自动适应容器 div，而不管我设置的宽度如何。

在我的小提琴中，我将 columns 设置为35vw，这给了我 2 个等宽的列。据我所知，这应该会导致 2 个完全可见的列和第三列的一部分，但这并没有发生。如果我设置px,em或%作为单位，也会发生这种行为。

这是浏览器的默认行为还是我遗漏了什么？

我在 CSS 中包含了如下给出的属性：

这会产生任何问题吗？