1

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

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

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

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

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

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

任何帮助是极大的赞赏！提前致谢。

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


（来源：人仔网）

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

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

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

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

4

1 回答 1

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现在有一个明确定义的高度。

于 2012-07-15T16:57:40.103 回答