jquery - 设置高度jquery的问题

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，因此它不会为您提供屏幕高度，而是页面所有呈现元素的高度。

...
$(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%;
}