Javascript: Получить подлинный центр веб-страницы?

Я начал использовать $('body').height() и width(), но иногда height() возвращает 0.Javascript: Получить подлинный центр веб-страницы?

Затем я начал использовать $('document').height() и width(), но на него влияет размер окна.

Я думаю, проблема с использованием document или body заключается в том, что они занимают все пространство на экране. то, что мне понадобится, это второй по величине прямоугольник, содержащий только содержимое, не содержащее поля или пробела ...

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

Как я могу надежно получить центр веб-страницы без влияния текущего размера окна?

Для сайтов, где содержимое выравнивается либо влево, либо вправо, выставляя большое пустое пространство, как я могу получить истинный центр?

Есть ли способ, чтобы ширина сайта полностью вписывалась в размер окна? Итак, когда я иду на весь экран или увеличиваю окно, содержимое будет плотно прилегать? Что можно сказать о сайтах, где контент не подходит, вместо того, чтобы отображать горизонтальную полосу прокрутки в окне браузера?

Я использую браузеры на основе webkit/mozilla и chrome для запуска javascript. IE не является проблемой, поскольку он никогда не будет использоваться. Я также использую jquery.

Пожалуйста, дайте мне знать, если то, что я прошу, недостаточно ясно, и я внесу необходимые изменения.

источник

2013-12-17 javastudent

Попробуйте использовать outerHeight/Width

window.outerHeight; 
window.outerWidth;

Это займет высоту/ширину окна, поэтому, когда он изменяет значения также будет изменять.

Смотрите эту ссылку на разницу между внутренним/внешним What is the difference between window.innerWidth window.outerWidth?

источник

2013-12-17 06:49:48

Я не совсем уверен, что вы просите.

Если вы хотите выровнять контейнер в центре доступного пространства, используйте margin auto;.
Если вы хотите сделать свой сайт совместимым с меньшими размерами экрана, взгляните на отзывчивый дизайн и, связанный, media queries.
$("body").height() не должен возвращаться 0. Поместите это в CSS:

HTML, тело { ширина: 100%; высота: 100%; }

источник

2013-12-17 06:49:10

в основном я хотите получить середину страницы без включения поля или заполнения (пустых пространств), чтобы получить «яблочко» фактического контента .... или даже лучше как-то растянуть содержимое страницы в соответствии с шириной страницы (чтобы избавиться от поля и отступов?) – javastudent

Вы хотите использовать window.outerHeight и window.outerWidth для «текущих» размеров окна. Центром будет то, что число делится на 2.
Однако ...если содержание его внутри плавающий фрейм, вы должны использовать это вместо того, чтобы:

$(document).outerWidth(); 
$(document).outerHeight();

Вы также упомянуть, что вы хотите выровнять что-то к середине окна. Для этого вы можете попробовать это:

// let 'obj' be a variable that holds DIV 
// with style="display:inline-block; position:absolute" 
// this function would center an element just like "modals" do 
function centerElement(obj) { 
    $(obj).css({ 
     left: ($(document).outerWidth() - $(obj).outerWidth())/2, 
     top: ($(document).outerHeight() - $(obj).outerHeight())/2 
    }); 
} 

// this will 'adjust the position' of the element 
$(window).resize(function() { 
    centerElement($('#my-centered-div')); 
}); 

// this will trigger the event for the first time 
$(window).resize();

Вы можете увидеть рабочий пример с этой JSFiddle: http://jsfiddle.net/4xkSq/2/

Существует еще один способ, используя только CSS, если ваш элемент имеет фиксированный размер: http://jsfiddle.net/82VZe/

источник

2013-12-17 07:25:42 Goodwine

Javascript: Получить подлинный центр веб-страницы?

ответ

Смежные вопросы