javascript - jQuery UI .position() 错过了使用 jQuery .height() 设置的目标元素的高度

Question

专家您好

这是我的 HTML:

<div class="full-height">
    <h1>Lorem</h1>
</div>

我正在使用 jQuery 设置 div.full-height 的高度，如下所示:

$(document).ready(function() {
    function setHeight() {
        viewportHeight = $(window).height();
        $('.full-height').height(viewportHeight);
    };
    setHeight();

    $(window).resize(function() {
        setHeight();
    });
});

现在我尝试使用 jQuery UI 将 div.full-height 中的 h1 的位置设置为 center center 如下:

$('.full-height > h1').position({
    my: 'center center',
    at: 'center center',
    of: '.full-height'
});

问题是，如果我在 CSS 中设置固定的 height 属性，它只能正确定位。

否则 div.full-height 有全高，但里面的 h2 会粘在顶部，因为 jQuery UI 的 .position()函数不知道 div.full-height 有 100% 的高度。

我怎样才能让它工作？

问候

拉尔夫

Answer 1

专家您好

那很快。 :-)

我只是通过在调整大小函数中包含 jQuery UI 函数解决了这个问题，如下所示:

$(document).ready(function() {
    function setHeight() {
        viewportHeight = $(window).height();
        $('.full-height').height(viewportHeight);
        $('.full-height > h1').position({
            my: 'center center',
            at: 'center center',
            of: '.full-height'
        });
    };
    setHeight();

    $(window).resize(function() {
        setHeight();
    });
});

谢谢!

问候

拉尔夫