Установите положение Div TOP в процентах от ширины браузера (определите положение высоты по ширине)

Я предполагаю, что для этого мне понадобится Javascript, но, возможно, есть трюк с CSS, о котором я не знаю.

У меня есть веб-страница, основанная на квадратном фоновом изображении. В идеале пользователь всегда будет указывать браузер в виде квадрата, но я знаю, что этого не произойдет.

Поскольку изображение имеет квадратную форму, если изображение настроено на 100% -ное заполнение браузера, ширина всегда будет такой же, как и «низ» страницы.

Таким образом, чтобы позиционировать элемент динамически по горизонтали (так, чтобы размер страницы можно было изменять, но при этом она сохраняла свою структуру), верхнее положение указанного элемента составляет процент от ширины.

Другими словами, если у меня есть горизонтальная полоса, которая ВСЕГДА должна располагаться на 85% от верха изображения, верхняя позиция может быть определена как 85% ширины (верх: 85% [ширины браузера]). Если вы просто определите верх горизонтальной полосы как 85% (верх: 85%;), положение горизонтальной полосы будет варьироваться в зависимости от высоты окна браузера (тогда как если вы установите ее как 85% ширины, это будет точно где я хочу это).

Как упоминалось ранее, это, вероятно, легко сделать с Javascript, но я не знаю Javascript. Я предполагаю, что в CSS нет функции, которая позволяла бы позиционировать, вычисляя процент ширины, но это было бы идеально.

Любая помощь приветствуется! Заранее спасибо.

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


(источник: renboy.com )

К сожалению, я новый пользователь, и интерфейс не позволяет мне размещать фото.

Страница квадратная (большое квадратное изображение). Существует горизонтальная навигационная панель, верхняя часть которой должна располагаться на 85% от верха изображения (она была бы определена как (top: 85%;), если бы браузер был открыт с точно таким же размером и размером (квадратом) изображения) .

Однако, если кто-то перетащит нижнюю часть своего браузера вниз (чтобы получился высокий прямоугольник), 85% окажутся не там, где я хочу, поверх изображения. ОДНАКО 85% ширины ВСЕГДА будет в точном правильном месте (потому что изображение всегда заполняет 100% ширины). Итак, если бы я мог определить горизонтальное положение как 85% ширины браузера (вместо высоты), панель навигации была бы именно там, где я хочу, независимо от того, какие размеры открывает браузер. Заранее благодарим за любые возможные решения.

============ width ();), но у меня нет опыта работы с Java / Javascript. Есть какая-нибудь помощь? Опять же, я хочу установить положение div, удерживающего горизонтальную панель навигации, на 85% ширины окна браузера. Спасибо!


html css percentage position width
person Jonas Bendsen    schedule 13.07.2012    source источник
comment
Возможно, вы захотите изменить все свои ссылки java на javascript. Это совершенно разные вещи.   -  person Don Roby    schedule 14.07.2012
comment
java! = javascript. Java работает как апплет, javascript запускается в браузере.   -  person Femaref    schedule 14.07.2012
comment
^ и только один из них вызывает у меня крапивницу.   -  person rjz    schedule 14.07.2012
comment
Возможно, стоит предоставить изображение, чтобы продемонстрировать, чего вы пытаетесь достичь. Ваше описание немного сложно понять.   -  person AverageMarcus    schedule 14.07.2012
comment
Как уже упоминалось ... Я действительно не знаю Java ... скрипт. (видимо даже не знаю, как это называется)   -  person Jonas Bendsen    schedule 14.07.2012
comment
@DavidThomas: Я не уверен, что это поможет с объяснением, но я загружу его куда-нибудь, чтобы кто-нибудь мог его схватить. Спасибо. renboy.com/images/squareWeb.jpg   -  person Jonas Bendsen    schedule 14.07.2012
comment
Вам нужно, чтобы фоновое изображение занимало весь экран, и вы хотите, чтобы полоса всегда находилась на расстоянии нескольких пикселей от дна?   -  person Cleverbot    schedule 14.07.2012
comment
@Cleverbot: Нет. Это был бы липкий нижний колонтитул. Я хочу иметь возможность разместить горизонтальную навигационную панель в одном и том же месте над изображением, даже если размер изображения является динамическим (изменяется для заполнения окна браузера). Я знаю, как заставить изображение заполнять окно браузера, это сложное положение горизонтальной панели навигации (потому что размещение является динамическим и должно основываться на ширине браузера, а не на высоте - что обычно и делается) .   -  person Jonas Bendsen    schedule 14.07.2012

Ответы (1)


arrow_upward
1
arrow_downward

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 теперь имеет четко определенную высоту.

person biziclop    schedule 15.07.2012
comment
Красивый! - в том, что он работает сам по себе. Однако теперь любое изображение внутри коробки должно быть 100%. Таким образом, изображения, размещенные внутри навигационной панели (или любого другого div внутри блока), не будут отображаться. Есть ли хорошая идея, как обойти эту проблему? Извините, если это глупый вопрос, но есть ли команда, которая не позволяет родительской команде .box img {width: 100%;} изменять изображения в других div внутри этого родительского div (можете ли вы очистить материал .box img в дочерний div)? - person Jonas Bendsen; 16.07.2012
comment
Ты мой герой. Спасибо. - person Jonas Bendsen; 16.07.2012