javascript - (响应式 jQuery)Div 未填充浏览器高度

Question

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

JSFiddle 是最简单的查看方式(只需向下调整预览窗口的大小): Fiddle

HTML:

<div class="window">
<div class="panel-1" id="one">
    <p>Lorem</p>
    <div class="nav">Jump To:
       <a href="#" id="1one">1</a>  <a href="#" id="1two">2</a>  <a href="#" id="1three">3</a>
    </div>
</div>
<div class="panel-2" id="two">
    <p>Lorem</p>
    <div class="nav">Jump To:
        <a href="#" id="2one">1</a>  <a href="#" id="2two">2</a>  <a href="#" id="2three">3</a>
    </div>
</div>
<div class="panel-3" id="three">
    <p>Lorem</p>
    <div class="nav">Jump To:
        <a href="#" id="3one">1</a>  <a href="#" id="3two">2</a>  <a href="#" id="3three">3</a>
    </div>
</div>

CSS:

body {
     margin:0;
     padding:0;
 }
 .window {
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
     position: fixed;
 }
 [class^="panel"] {
     height: 100%;
     text-align: center;
     position: absolute;
     transition: all ease 1s;
     -o-transition: all ease 1s;
     -moz-transition: all ease 1s;
     -webkit-transition: all ease 1s;
 }
 .panel-1 {
     background: gray;
 }
 .panel-2 {
     background: GoldenRod;
     margin-top:100%;
 }
 .panel-3 {
     background: green;
     margin-top:100%;
 }

JS(jQuery):

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

任何帮助将不胜感激! Fiddle

Answer 1

您的问题是由于使用 margin-top 动画和定位面板开/关屏幕引起的。因为面板都是绝对定位的，所以您可以使用 top 声明，如下所示:

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

这是您更新的 Fiddle