Центрируйте div между другим div и нижней частью окна, используя jQuery - PullRequest
Новая
       39

Центрируйте div между другим div и нижней частью окна, используя jQuery

0 голосов
/ 27 февраля 2012

У меня есть веб-страница, расположенная следующим образом ... 

|----------------------|
|     |----------|     |
|     | Logo div |     |
|     |----------|     |
|                      |
|     |----------|     |
|     |          |     |     
|     | Content  |     |
|     |          |     |
|     |----------|     |
|----------------------|

В настоящее время я пытаюсь центрировать мой div (Content), используя следующую функцию: 

 jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft() + "px");
return this;

}

, который я получил из другого SO вопроса: Использование jQuery для центрирования DIV на экране

Эта функция отлично работает, если мое разрешение достаточно большое,однако на меньших экранах это заставляет div, который я собираю, «подняться» и разделить пространство с div, содержащим логотип над ним.Так что я хотел бы добиться с помощью jQuery, чтобы расположить его вертикально по центру между логотипом div #logo и «концом» страницы, не плавая сверху логотипа div.

Как бы я сделал это с помощью jQuery?

1 Ответ

2 голосов
/ 27 февраля 2012

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

Вам нужно проверить расчеты высоты / ширины и, если они не соответствуют минимальным требованиям, заменить их на фиксированное значение. Вы можете жестко закодировать фиксированное значение или использовать JQuery для получения высоты логотипа div.

Что-то вроде: 

var h = 100; //Height of logo div
var top_position = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop();

if(top_position < h)
    top_position = h;

this.css("top", top_position + "px");
...