我正在尝试根据屏幕宽度从屏幕顶部更改导航栏的位置。我尝试使用CSS:top: 10%
,但这是基于屏幕的高度而不是宽度。
有没有办法获得top: .1 * width
?
答案 0 :(得分:3)
经常被忽视的是,元素的垂直margin
百分比属性引用了它们的包含块width
,而不仅仅是水平块。
这意味着,如果您将某些内容设置为margin-top:10%;
,则其上限将相当于包含块宽度的10%。
您可以轻松看到in this jsFiddle。尝试垂直和水平调整输出面板的大小,并注意调整哪个调整方向使内部块上下移动。
您可以使用vw
和vh
,如果您的浏览器目标允许,我建议您这样做。但是如果你不能使用它们,你就不必立即使用Javascript。很多人在Javascript开启一整套新的蠕虫时立即开枪(比如,如果浏览器调整大小,会怎么样?),特别是当CSS的一些创造性使用可以让你摆脱困境时。
答案 1 :(得分:1)
我打算说没有办法这样做,但显然在2011年的CSS3中你有vw/vh允许大小相对于视口。例如:
img { height: 95vw; }
应该为图像提供视口宽度的95%的高度。阅读更多;显然只有IE9在撰写本文时才支持它。