Рассмотрим этот пример:
jQuery(document).ready(function($){
function elementHeight() {
// Get height of the browser viewport
var windowH = $(window).height();
// Set element height (i.e. #elementID) equal to
// that of the browser viewport
$('#elementID').height(windowH+'px');
}
elementHeight();
// Make sure the height is recalculated and set on the
// element when the browser is resized
$(window).resize(function() {
elementHeight();
});
});
Приведенный выше код устанавливает высоту элемента #elementID
так, чтобы он был равен высоте #elementID
просмотра браузера.
Но размер видового экрана браузера изменяется, когда он изменяется, и в идеале, так же как и высота элемента. Таким образом, я хочу, чтобы код также изменял высоту #elementID
так, чтобы он всегда равнялся #elementID
просмотра браузера, то есть даже когда пользователь изменил размер браузера.
Я попытался использовать .resize()
, как вы можете видеть в коде выше, но я, кажется, делаю это неправильно.
Поскольку вместо замены высоты элемента (изначально вычисленного при первом запуске кода) высота продолжает складывать (x + y + z +...) каждый раз, когда размер браузера изменяется, что увеличивает высоту элемента и больше.
Что я делаю не так? И как это сделать?
ПРИМЕЧАНИЕ. Я также попробовал их вместо $('#elementID').height(windowH+'px');
$('#elementID').css('height',windowH+'px');
$('#elementID').attr('style', 'height:'+windowH+'px;');
Они не имели никакого значения.
В jQuery вы можете сделать что-то вроде
function checkResizeAndReady() {
var windowHeight = $(window).height();
$('#height').css('height', windowHeight + "px");
}
$(window).on("resize", checkResizeAndReady);
$(document).on("ready", checkResizeAndReady);
http://codepen.io/RobErskine/pen/efEGc/
Или, наоборот, вы можете использовать CSS:
body,html{
display:block;
width:100%;
height:100%;
margin:0;
}
#filler{
height:100%;
background-color:red;
}
Попробуй это:
$('#elementID').height(windowH);
Если вы хотите добавить px, я думаю, что так оно и должно быть сделано:
$('#elementID').css('height',windowH + 'px');
Я бы всегда рекомендовал использовать.css, поскольку он быстрее :)