(响应jQuery)分区未填充浏览器高度

Question

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

JSFiddle是查看的最简单方法(只需向下调整预览窗口的大小)：小提琴

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

任何帮助都将不胜感激！小提琴

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

这是您最新的小提琴

Answer 2

嗨，我更新了小提琴。只需检查它是否正常工作。

http://jsfiddle.net/ejqLy/8/

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

}

与洗牌动画：

JS小提琴

Answer 3

div的高度看起来不错，但是您的.nav需要定位到底部，如下所示：jsfiddle.net/ejqLy/6