css - 将 Div TOP 位置设置为浏览器宽度的百分比(按宽度定义高度位置)

Question

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

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

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

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

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

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

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

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

_{(来源:renboy.com)}

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

页面是正方形的(大的正方形图像)。有一个水平导航栏，它的顶部应该位于距离图像顶部 85% 的位置(如果浏览器打开到与图像完全相同的大小和尺寸(正方形)，它将被定义为 (top:85%;)) .

但是，如果有人向下拖动浏览器的底部(以形成一个高矩形)，则 85% 的区域不会出现在图像上方我想要的位置。然而，85% 的宽度将始终位于正确的位置(因为图像始终填充 100% 的宽度)。因此，如果我可以将水平位置定义为浏览器 宽度 的 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 现在具有明确定义的高度。