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

Question

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

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

由于图片是方形的，如果图片设置为以 100% 填充浏览器，则宽度始终与页面“底部”应位于的位置相同。

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

换句话说，如果我有一个应该始终位于图像顶部 85% 的水平条，则顶部位置可以定义为宽度的 85%（顶部：85% [浏览器宽度]）。如果您简单地将水平条的顶部定义为 85% (top:85%;)，则水平条的位置将随浏览器窗口的高度而变化（而如果您将其设置为宽度的 85%，则它正好是我想要的地方）。

如前所述，使用 Javascript 可能很容易做到这一点，但我不懂 Javascript。我认为 CSS 中没有允许通过计算宽度百分比来定位的函数，但那将是理想的。

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

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

_{（来源：renboy.com）}

很遗憾，我是新用户，界面不允许我发布照片。

页面是方形的（一个大的方形图像）。有一个水平导航栏，其顶部应位于距图像顶部 85% 的位置（如果浏览器打开到与图像完全相同的大小和尺寸（正方形），它将被定义为 (top: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 现在具有明确定义的高度。