页面加载时将div设置为100％视图端口大小

Question

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

某种视差场所。

我有以下HTML代码

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

现在我希望第一个div能够说出视口的100％高度。

问题是，如果我设置高度：100％页面在90％缩放时很好

但是一旦我缩小并重新加载页面，div就不会100％显示底部div。

无论缩放浏览器，我都会缩短第一个div应该有100％的观看区域。

Answer 1

嗯，你可以告诉那个div ...是窗口的高度，并用jquery调用resize函数......所以你调整大小会保持高度......

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

Answer 2

如果它适合您，请尝试vh。 vh＆amp; vw是视口高度和宽度。 的 FIDDLE

<div class="sec sec1"></div>
<div class="sec sec2"></div>
<div class="sec sec3"></div>
<div class="sec sec4"></div>

---

.sec{
    width:100%;
    height:100vh;
}
.sec1{
    background-color:red;
}
.sec2{
    background-color:blue;
}
.sec3{
    background-color:green;
}
.sec4{
    background-color:yellow;
}