Как разместить элемент на 40 пикселей ниже самого низкого уровня DIV на странице, когда имеется полоса прокрутки? - PullRequest
Новая
       9

Как разместить элемент на 40 пикселей ниже самого низкого уровня DIV на странице, когда имеется полоса прокрутки?

2 голосов
/ 07 августа 2009

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

Если элементы на сайте не доходят до нижней части окна, я хочу логотип в нижнем правом углу, что и происходит в настоящее время. Это здорово.

Если элементы достигают нижней части страницы или за ее пределами, форсируя полосу прокрутки, я хочу, чтобы логотип располагался на 40 пикселей ниже нижней части самого нижнего DIV, все еще в правом нижнем углу страницы (почти как если бы часть нормального потока документов, а не абсолютно позиционируется). Это то, что я не могу понять.

Ответы [ 2 ]

1 голос
/ 07 августа 2009

Самый простой способ решить эту проблему - создать относительно позиционированный контейнерный блок прямо внутри тега body. Тогда ваш логотип будет располагаться абсолютно по отношению к этому контейнеру, а не к области просмотра. Затем вам нужно проделать небольшую работу, чтобы убедиться, что он отображается внизу страницы, когда нет достаточного количества контента, чтобы вытолкнуть его туда.

То, что вы хотите сделать, примерно похоже на липкий нижний колонтитул css: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

0 голосов
/ 07 августа 2009

Одна вещь, которую вы могли бы сделать, это сделать вашу область просмотра 100% высоты, когда нет полосы прокрутки. При наличии полосы прокрутки высота будет длиннее, чем область просмотра.

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

Вот код CSS: 

html, body {

    height: 100%;

}

#container {

    position: relative;

    min-height: 100%;

    height: 100%;

    voice-family: "\"}\"";

    voice-family: inherit;

    height: auto;

}

html>body #container {

    height: auto;

}
...