Javascript （响应jQuery）Div未填充浏览器高度

我制作了一些jQuery全页滑动面板，在桌面上看起来非常完美，但是当浏览器向下调整时，面板div不会填充页面

JSFIDLE是查看的最简单方法，只需向下调整预览窗口的大小：

HTML:

JS jQuery：

---

任何帮助都将不胜感激

您的问题是由于使用边距顶部在屏幕上/屏幕外设置面板动画和位置造成的。因为面板都是绝对定位的，所以您可以使用顶部声明，如下所示：

$(document).ready(function () {
    $('#1two').click(function () {
        $('.panel-2').css('top', '0');
    });
    $('#1three').click(function () {
        $('.panel-3').css('top', '0');
        $('.panel-2').css('top', '0');
    });
    $('#1one').click(function () {
        $('.panel-3').css('top', '100%');
        $('.panel-2').css('top', '100%');
    });
    $('#2two').click(function () {
        $('.panel-2').css('top', '0');
    });
    $('#2three').click(function () {
        $('.panel-3').css('top', '0');
    });
    $('#2one').click(function () {
        $('.panel-3').css('top', '100%');
        $('.panel-2').css('top', '100%');
    });
    $('#3two').click(function () {
        $('.panel-2').css('top', '0');
        $('.panel-3').css('top', '100%');
    });
    $('#3three').click(function () {
        $('.panel-3').css('top', '0');
    });
    $('#3one').click(function () {
        $('.panel-3').css('top', '100%');
        $('.panel-2').css('top', '100%');
    });
});

此外，请确保更新您的CSS：

 .panel-1 {
     background: gray;
 }
 .panel-2 {
     background: GoldenRod;
     top:100%;
 }
 .panel-3 {
     background: green;
    top: 100%;
 }
/* Nav */
 .nav {
    background:black;
    color:yellow;
    bottom:0;
    position:absolute;
    width:100%;
}

---

这是您更新的

div的高度看起来不错，但是您的.nav需要放在底部，如下所示：

嗨，我已经更新了小提琴。只需检查它是否按预期工作即可

}

使用随机播放动画：

---

div的高度看起来还可以，但是您的.nav需要放在底部，如下所示：您可以签出fullPage.js，这是一个jquery插件，它只执行您正在寻找的功能@Nirus或者我们可以，你知道，只是解决问题。@Nirus评论是公平的，如果他把它作为一个答案发布的话，它将值得批评。不回答OP的问题。你是对的@Monnes我的屏幕太小，无法显示被引用的实际问题。

// Controls panel movement
$(document).ready(function () {
    $('#1two').click(function () {
        $('.panel-2').css('margin-top', '0');
    });
    $('#1three').click(function () {
        $('.panel-3').css('margin-top', '0');
        $('.panel-2').css('margin-top', '0');
    });
    $('#1one').click(function () {
        $('.panel-3').css('margin-top', '100%');
        $('.panel-2').css('margin-top', '100%');
    });
    $('#2two').click(function () {
        $('.panel-2').css('margin-top', '0');
    });
    $('#2three').click(function () {
        $('.panel-3').css('margin-top', '0');
    });
    $('#2one').click(function () {
        $('.panel-3').css('margin-top', '100%');
        $('.panel-2').css('margin-top', '100%');
    });
    $('#3two').click(function () {
        $('.panel-2').css('margin-top', '0');
        $('.panel-3').css('margin-top', '100%');
    });
    $('#3three').click(function () {
        $('.panel-3').css('margin-top', '0');
    });
    $('#3one').click(function () {
        $('.panel-3').css('margin-top', '100%');
        $('.panel-2').css('margin-top', '100%');
    });
});

// Forces "window" <div> to full page height
$(function () {
    $('.window').css({
        'height': (($(window).height())) + 'px'
    });
    $(window).resize(function () {
        $('.window').css({
            'height': (($(window).height())) + 'px'
        });
    });
});

$(document).ready(function () {
    $('#1two').click(function () {
        $('.panel-2').css('top', '0');
    });
    $('#1three').click(function () {
        $('.panel-3').css('top', '0');
        $('.panel-2').css('top', '0');
    });
    $('#1one').click(function () {
        $('.panel-3').css('top', '100%');
        $('.panel-2').css('top', '100%');
    });
    $('#2two').click(function () {
        $('.panel-2').css('top', '0');
    });
    $('#2three').click(function () {
        $('.panel-3').css('top', '0');
    });
    $('#2one').click(function () {
        $('.panel-3').css('top', '100%');
        $('.panel-2').css('top', '100%');
    });
    $('#3two').click(function () {
        $('.panel-2').css('top', '0');
        $('.panel-3').css('top', '100%');
    });
    $('#3three').click(function () {
        $('.panel-3').css('top', '0');
    });
    $('#3one').click(function () {
        $('.panel-3').css('top', '100%');
        $('.panel-2').css('top', '100%');
    });
});

 .panel-1 {
     background: gray;
 }
 .panel-2 {
     background: GoldenRod;
     top:100%;
 }
 .panel-3 {
     background: green;
    top: 100%;
 }
/* Nav */
 .nav {
    background:black;
    color:yellow;
    bottom:0;
    position:absolute;
    width:100%;
}

 .nav {
background:black;
color:yellow;
bottom:0;
position:absolute;
width:100%;