Question

我试图用jQuery将高度设置为两个元素...... Link to example

jQuery的：

$(document).ready(function() {
    var windowWidth = $(document).width(),
        windowHeight = $(document).height(),
        fadeSpeed = 'slow';

    var aboutOffset = $('div.about').offset().top;

    $('div.head').height(windowHeight);
    $('div.nav').fadeIn(fadeSpeed, function() {
        $('div.head > div.title').fadeIn(fadeSpeed, function() {
            $('div.head > img').fadeIn(fadeSpeed);
        });
    });
    $('div.head > img').on('click', function() {
        $('html, body').animate({
            scrollTop: windowHeight +'px'
        }, "slow");
        console.log('image - true');
    });

    $('div.about').height(windowHeight);

    //nav
    $('div.nav > li').on('click', function() {

    });
    //resize
    $(window).resize(function() {
        windowWidth = $(document).width();
        windowHeight = $(document).height();

        $('div.head').height(windowHeight);
        $('div.about').height(windowHeight);
    });
});

目前正在发生的问题是，当浏览器/网页调整大小时，会将当前高度加倍，而不是将其设置为新的高度。为什么会这样？

Answer 1

document！= window，您的document（作为网页最高节点的代表）包含.head和.about，因此它不会t给你一个屏幕高度，但页面的所有渲染元素的高度。

...
$(window).resize(function() {
    windowWidth = $(window).width();
    windowHeight = $(window).height();

    $('div.head').height(windowHeight);
    $('div.about').height(windowHeight);
});

顺便说一句，您可以完全不使用jquery，只需添加到css：

.head, .about {
    width: 100%;
    height: 100%;
}

设置高度jquery的问题

1 个答案: