将Div TOP位置设置为浏览器宽度的百分比（按宽度定义高度位置） [英] Set Div TOP position as percentage of browser width (define height position by width)

问题描述

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

I am assuming I will need Javascript for this, but perhaps there is a CSS trick I'm not aware of.

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

I have a web page based on a square background image. Ideally, the user would always set the browser as a square, but I know that won't happen.

因为图像是正方形的，如果图像设置为fill浏览器在100％，宽度总是与页面的底部相同。

Because the image is square, if the image is set to fill the browser at 100%, the width is always the same as where the "bottom" of the page should be.

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

Thus, to position an element dynamically horizontally (so the page can be resized but still hold it's structure), the top position of said element is a percentage of the width.

换句话说，如果我有一个水平条应始终位于距图像顶部85％的位置，顶部位置可定义为宽度的85％（顶部：浏览器宽度的85％）。如果你简单地定义水平条的顶部为85％（顶部：85％;），水平条的位置将随浏览器窗口的高度而变化（如果你将它设置为宽度的85％

In other words, if I have a horizontal bar that should ALWAYS be positioned 85% from the top of the image, the top position can be defined as 85% of width (top:85% [of browser width]). If you simply define the top of the horizontal bar as 85% (top:85%;), the horizontal bar's position will vary with the height of the browser window (whereas if you set it as 85% of the width it would be exactly where I want it).

如前所述，这可能是一个很简单的事情与Javascript，但我不知道Javascript。我假设CSS中没有一个函数，它将允许通过计算宽度的百分比进行定位，但这将是理想的。

As mentioned before, this is likely an easy thing to do with Javascript, but I don't know Javascript. I assume there isn't a function in CSS that will allow positioning by calculating a percentage of width, but that would be ideal.

任何帮助都非常感谢！先感谢。

Any help is greatly appreciated! Thanks in advance.

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

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

不幸的是我是一个新用户，界面不允许我张贴照片。

Unfortunately I'm a new user and the interface won't allow me to post a photo.

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

The page is square (a large, square image). There is a horizontal navbar who's top should be positioned 85% from the top of the image (it would be defined as (top:85%;) if the browser were opened to the exact same size and dimension (square) of the image).

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

However, if someone drags the bottom of their browser down (to make a tall rectangle), 85% will not be where I want it over the image. HOWEVER, 85% of the width will ALWAYS be in the exact right spot (because the image always fills 100% of the width). So, if I could define the horizontal position as 85% of the browser width (instead of height), the navbar would be exactly where I want it, no matter what dimensions the browser is open to. Thanks in advance for any possible solutions.

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

================== Doing more research, it would seem that the answer might lie in Jquery (using position or maybe outerWidth or possibly something like var winWidth = $(window).width();), but I have no experience with Java/Javascript. Any help out there? Again, I want to set the position of the div holding the horizontal navigation bar to 85% of the width of the browser window. Thanks!

推荐答案

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％。非crappy浏览器中的图像只在一侧调整大小时保持其纵横比。 .box 想要完全包含图片，因此其高度将设置为图片的高度。因为 .box 位于绝对位置，您可以将 .bar 放在 .box ，并根据需要垂直放置，因为 .box 现在有一个明确定义的高度。

WTF happens: .box is set to 100% width. The image inside is also set to 100%. Images in non-crappy browsers keep their aspect ratio when they are resized by only one side. .box wants contain the image entirely, so its height will be set to image's height. Because .box is positioned absolute, you can put the .bar inside the .box and position it vertically as you wish, because .box now has a well-defined height.

这篇关于将Div TOP位置设置为浏览器宽度的百分比（按宽度定义高度位置）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！