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

Answer 2

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

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

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

}

使用随机播放动画：

JS fiddle

Answer 3

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

（响应式jQuery）Div没有填充浏览器高度

3 个答案: