2009-06-09 5 views
2

В моем CSS я устанавливаю позицию элемента в верхней части страницы с помощью CSS top 0px.В jQuery, как получить нижнюю позицию браузера?

Как я могу определить положение нижней части браузера? (Я хочу заставить элемент в нижней части страницы, т. Е. Снижать видимость).

ответ

4

вы должны использовать css: bottom: 0px;

+0

вместе с позиции: фиксированная; –

0

Вы хотите, чтобы какой-либо элемент оставался в нижней части окна браузера, когда пользователь прокручивает страницу вниз или элемент, который «прилипает» к нижней части страницы, где бы это ни было?

Если вы хотите # 2, можно найти метод CSS с использованием перекрестного браузера here.

2

Нижняя позиция браузера - это расстояние от вершины: от 0 до дна, которое равно высоте документа для клиента. она может быть легко вычислен как:

 $(document).ready(function() { 
     var bottomPosition = $(document).height(); 
     alert(bottomPosition); 
    }); 

надеюсь, что это помогает

+3

- это высота документа, а не нижняя часть окна. или даже высоту окна, это НЕ правильный ответ. –

1

Вот мой подход для основного элемента, который должен остаться в нижней части страницы.

Сначала JavaScript. Функция centerBottom - это то, где происходит действие.

<script type="text/javascript"> 
/** 
* move an item to the bottom center of the browser window 
* the bottom position is the height of the window minus 
* the height of the item 
*/ 
function centerBottom(selector) { 
    var newTop = $(window).height() - $(selector).height(); 
    var newLeft = ($(window).width() - $(selector).width())/2; 
    $(selector).css({ 
     'position': 'absolute', 
     'left': newLeft, 
     'top': newTop 
    }); 
} 

$(document).ready(function(){ 

    // call it onload 
    centerBottom("#bottomThing"); 

    // assure that it gets called when the page resizes 
    $(window).resize(function(){ 
     centerBottom('#bottomThing'); 
    }); 

}); 
</script> 

Некоторые стили, чтобы понять, что мы движемся. Это может быть сложно, если вы не знаете высоту и ширину. Обычно DIV имеют ширину 100%, если они не указаны, что может быть не таким, каким вы хотите.

<style type="text/css"> 
body { 
    margin: 0; 
} 
#bottomThing { 
    background-color: #600; color: #fff; height:40px; width:200px; 
} 
</style> 

И тело страницы:

<body> 
<div id="bottomThing"> 
    Put me at the bottom. 
</div> 
</body> 
Смежные вопросы