css - 页面加载时将 div 设置为 100% View 端口大小

Question

我正在创建一个以 div 作为幻灯片的网站...

有点像视差网站。

我有以下 HTML 代码

<div id='div1'>content</div>
<div id='div2'>content</div>
<div id='div3'>content</div>
<div id='div4'>content</div>

现在我想让第一个 div 达到视口(viewport) 100% 的高度。

问题是，如果我设置 height:100% 页面可以缩放 90%

但是一旦我缩小并重新加载页面，div 不是 100%，底部 div 就会出现。

不管浏览器的缩放比例如何，第一个 div 都应该有 100% 的查看区域。

Answer 1

好吧，你可以告诉那个 div... 是窗口的高度，并用 jquery 调用调整大小函数...所以无论你调整什么大小它都会保持 heihgt...

var hheight = $(window).height();
        $('#side_nav').css('height', hheight);
        $(window).resize(function(){
            var hheight = $(window).height();
            $('#side_nav').css('height', hheight);
        });