Question

我假设我需要Javascript，但也许有一个我不知道的CSS技巧。

我有一个基于方形背景图像的网页。理想情况下，用户总是将浏览器设置为正方形，但我知道这不会发生。

因为图像是方形的，如果图像设置为以100％填充浏览器，则宽度始终与页面的“底部”应该相同。

因此，要动态地水平定位元素（因此页面可以调整大小但仍保持其结构），所述元素的顶部位置是宽度的百分比。

换句话说，如果我的水平条应始终位于距图像顶部85％的位置，则顶部位置可定义为宽度的85％（顶部：[浏览器宽度的85％]）。如果您只是将水平条的顶部定义为85％（顶部：85％;），则水平条的位置将随浏览器窗口的高度而变化（而如果将其设置为宽度的85％，则它将完全正确我想要的地方。）

如前所述，使用Javascript可能很容易，但我不知道Javascript。我假设CSS中没有一个函数可以通过计算宽度的百分比进行定位，但这是理想的。

非常感谢任何帮助！提前谢谢。

======================================

http://renboy.com/images/squareWeb.jpg

不幸的是，我是新用户，界面不允许我发布照片。

页面是正方形（大图形方形图像）。有一个水平导航栏的顶部应该位于图像顶部的85％（如果浏览器打开到图像的完全相同的大小和尺寸（方形），它将被定义为（顶部：85％;）

然而，如果有人拖下浏览器的底部（制作一个高大的矩形），85％将不会是我想要它在图像上的位置。但是，85％的宽度始终位于正确的位置（因为图像总是填充宽度的100％）。因此，如果我可以将水平位置定义为浏览器 width 的85％（而不是高度），则无论浏览器打开的是什么尺寸，导航栏都将正好位于我想要的位置。提前感谢任何可能的解决方案。

================== 做更多的研究，似乎答案可能在于Jquery（使用position或者outerWidth或者类似var winWidth = $（window）.width（）;），但我没有使用Java / Javascript的经验。有帮助吗？同样，我想将保持水平导航栏的div的位置设置为浏览器窗口宽度的85％。谢谢！

Answer 1

http://jsfiddle.net/f7RMA/

<div class="box">
  <img src="http://renboy.com/images/squareWeb.jpg">
  <div class="bar"></div>
</div>

CSS：

.box {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
}

.box img {
    display: block;
    width: 100%;
}

.box .bar {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 85%;
}

WTF发生：.box设置为100％宽度。里面的图像也设置为100％。非粗略浏览器中的图像仅在一侧调整大小时保持其宽高比。 .box想要完全包含图像，因此其高度将设置为图像的高度。由于.box位于绝对位置，因此您可以将.bar放在.box内并根据需要垂直定位，因为.box现在具有明确定义的高度。

将Div TOP位置设置为浏览器宽度的百分比（按宽度定义高度位置）

1 个答案: