Использование jQuery для динамической установки высоты элемента; как сбросить высоту по событию .resize ()?

Question

Использование jQuery для динамической установки высоты элемента; как сбросить высоту по событию .resize ()?

0

Рассмотрим этот пример:

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;');

Они не имели никакого значения.

its_me 02 апр. 2014, в 17:29

Источник

Теги:

javascript

jquery

2 ответа

Ещё вопросы

Rob Erskine · Answer 1 · 2014-04-02T13-49-00.000Z

В 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;
 }

http://codepen.io/RobErskine/pen/aezkG/

Я попробую ваше решение jQuery. Ваше CSS-решение мне не подходит, потому что оно не позволяет мне вертикально центрировать содержимое элементов. Вот еще: stackoverflow.com/a/22804845/1071413
Только что попробовал решение jQuery. Проблема сохраняется.
Ну, что не сработало? Там рабочий код в комплекте. Используя эту технику, вы также можете центрировать все по центру в CSS - codepen.io/RobErskine/pen/KsABe .
Роб, используя top: 50%; не центрирует элемент по вертикали. Он размещает элемент ниже половины высоты окна просмотра браузера.
Вы смотрели на коде? Вот что преобразует: translateY (-50%); заботится о.

pj013 · Answer 2 · 2014-04-02T13-42-00.000Z

Попробуй это:

$('#elementID').height(windowH);

Если вы хотите добавить px, я думаю, что так оно и должно быть сделано:

$('#elementID').css('height',windowH + 'px');

Я бы всегда рекомендовал использовать.css, поскольку он быстрее :)

Я попробовал это. Не имеет никакого значения. Добавил примечание в мой вопрос, чтобы отразить то же самое.