（响应jQuery）不填充浏览器高度

我做了一些jQuery整页滑动面板，这在桌面上看起来很完美，但是当浏览器调整大小时，面板div不会填满页面。（响应jQuery）不填充浏览器高度

的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

来源

2014-01-26 user3236756

的div高度看起来不错，但你的.nav需要被定位到底部，像这样：http://jsfiddle.net/ejqLy/6/ – scottsanders

你可以检出fullPage.js一个jquery插件，只是做你正在寻找的东西。 http://alvarotrigo.com/fullPage/ – Nirus

@Nirus或者我们可以，你知道，只是解决问题。 – monners

您的问题是由于使用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

来源

2014-01-26 04:31:29 monners

-1

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

来源

2014-01-26 04:34:13 scottsanders

不回答OP的问题。 – monners

你是对的@monners我的屏幕太小，无法显示被引用的实际问题。 – scottsanders

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

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

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

}

随着洗牌动画：

JS fiddle

来源

2014-01-26 04:54:16 Nirus

（响应jQuery）不填充浏览器高度

回答

相关问题