получить высоту для позиционирования div в абсолютном режиме

StackOverflow https://stackoverflow.com/questions/940428

Вопрос

поскольку на мой последний вопрос ответили сразу..Я решил опубликовать новое, от которого у меня вырываются все волосы, XD

это проблема..

у меня есть дизайн с абсолютным позиционированием div..который имеет прозрачный PNG и простой якорь...именно так.

<div class="buyfloat">
      <img src="img/buy.png" />
</div>

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

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

.buyfloat{
    width:333px;
    height:135px;
    position:absolute;
    left:10px;
    bottom:200px; /**   not working         **/
    margin:5px auto 0 auto;
    z-index:99;
}

Я ищу какой-нибудь JavaScript (кажется, я видел его некоторое время назад), который дает мне рост тела прямо на CSS..но если у вас есть другое и более простое решение..Я весь во внимании!

заранее спасибо.

Это было полезно?

Решение

Имейте в виду, что «позиция:«абсолютный» на самом деле относится к первому предку элемента, который имеет значение позиции, отличное от «статического» (см. пункт 4 в http://www.w3.org/TR/CSS2/visudet.html#taining-block-details).Итак, возможно, у вас такая ситуация, и «дно» измеряется от какого-то другого элемента, а не от html/body.

Другие советы

Во-первых, единственный способ, которым JS работает в CSS, — это «выражение», которое предназначено только для IE, во-вторых, для этого потребуется, чтобы у ваших пользователей также был включен JS.

pos:abs удаляет элемент из обычного макета и помещает его относительно ближайшего абсолютного или относительного родителя.Если вы используете строгий или переходный xhtml, нижняя часть будет работать, если вы просто сделаете тело относительным:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
        body {height: 9000px;position:relative;}
        #a {position:absolute; bottom:0px;}
        </style>
    </head>
    <body>
    <div id="a">bottomDweller</div>
    </body>
</html>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top