Set Div TOP position as percentage of browser width (define height position by width)

问题

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.

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.

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).

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.

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

_{(source: renboy.com)}

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

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).

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.

================== 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!

回答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 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.

来源：https://stackoverflow.com/questions/11478163/set-div-top-position-as-percentage-of-browser-width-define-height-position-by-w

标签

css

html

position

width

percentage