根据宽度%更改顶部位置

时间:2013-07-18 03:35:41

标签: html css

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

有没有办法获得top: .1 * width

2 个答案:

答案 0 :(得分:3)

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

这意味着,如果您将某些内容设置为margin-top:10%;,则其上限将相当于包含块宽度的10%。

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

可以使用vwvh,如果您的浏览器目标允许,我建议您这样做。但是如果你不能使用它们,你就不必立即使用Javascript。很多人在Javascript开启一整套新的蠕虫时立即开枪(比如,如果浏览器调整大小,会怎么样?),特别是当CSS的一些创造性使用可以让你摆脱困境时。

答案 1 :(得分:1)

我打算说没有办法这样做,但显然在2011年的CSS3中你有vw/vh允许大小相对于视口。例如:

img { height: 95vw; }

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