使用 JQuery Page Scroller 的 100% 高度 div

Question

我有一个网页，一个包含五个不同 div 的包装器，并且我正在使用查询 PageScroller 进行可滚动导航，因此页面彼此上下堆叠。我的问题是，当我查看一个“页面”时，我可以看到下面“页面”的顶部，我怎样才能让这些 div 占据 100% 的可视空间？ （仅身高）

<div id="wrapper">
    <div id="main">
        <div id="page 1" class="section"> Content here </div>
        <div id="page 2" class="section"> Content here </div>
        <div id="page 3" class="section"> Content here </div>
        <div id="page 4" class="section"> Content here </div>
        <div id="page 5" class="section"> Content here </div>
    </div>
</div>

这是 HTML 的设置，jquery 使用“section”类在单击导航时滚动到该 div。

任何帮助将不胜感激

谢谢

Answer 1

$(window).ready(function()
{
   var viewport_height = parseInt($(window).height());
   //stringify
   viewport_height = viewport_height + '';
   viewport_height += 'px';

   $(".section").css("height", viewport_height);
}