html - 根据宽度% 更改顶部位置

Question

我正在尝试根据屏幕宽度从屏幕顶部更改导航栏的位置。我在 CSS: 中尝试过top: 10%，但这是基于屏幕的高度而不是宽度。

有没有办法得到top: .1 * width？

Answer 1

经常被忽视的是margin元素的垂直百分比属性指的是它们的包含块width，而不仅仅是水平的。

这意味着如果您将某些内容设置为margin-top:10%;，它将具有相当于其包含块宽度的 10% 的上边距。

您可以在这个 jsFiddle中轻松看到这一点。尝试垂直和水平调整输出面板的大小，并注意哪个调整大小方向使内部块上下移动。

您可以使用vw并且vh如果您的浏览器目标允许，我建议您这样做。但是如果你不能使用它们，你不必马上使用 Javascript。太多的人在 Javascript 打开一个全新的蠕虫罐（例如，如果浏览器调整大小怎么办？）时立即为 Javascript 开枪，尤其是当对 CSS 的一点创造性使用无论如何都可以让你摆脱困境时。

Answer 2

我要说没有办法这样做，但显然在 2011 年以来的 CSS3 中，你有vw/vh允许大小相对于视口。例如：

img { height: 95vw; }

应该给图像的高度是视口宽度的 95%。阅读更多; 在撰写本文时，显然只有 IE9 支持它。