瀏覽器高度100％

Question

當我必須向下滾動時，如何讓我的100％高度div達到瀏覽器的全高度。 當我加載我的頁面時，div填充瀏覽器窗口但是當我必須滾動100％高度div時不再進一步，在下面留下一個空白區域。

HTML

<header>
</header>

<section id="sidebar">
</section>

<section id="main-container">
</section>

</div>

CSS

html, body { width:100%;height:100%; overflow:auto;}

body{
margin:0;
min-height:100%; 
height:100%; 
width:100%;
padding:0;
font-family: 'Open Sans', sans-serif;
color:#484848;
overflow-y:scroll;
}

#wrapper{
width:100%;
height:100%;
min-height:100%;
position:relative;
margin:0;
}

header{
width:100%;
height:10%;
min-height:80px;
position:relative;
}

#sidebar{
display: inline-block;
width:20%;
min-width:170px;
height:90%;
min-height:90%;
position:relative;
}

#main-container{
display: inline-block;
margin-left:1px;
width:78%;
height:90%;
margin-right:0.5%;
vertical-align:top;
position:relative;
}

到目前為止，我已經嘗試了所有我能想到的東西。

Answer 1

設置高度：100％並從#wrapper中刪除最小高度設置。 將min-height：100％應用於您要填充瀏覽器的div。

這里類似的例子

#wrapper {
    width:100%;
    height:100%;
    position:relative;
    margin:0;
}

希望這可以幫助

Answer 2

最簡單的方法就是使用CSS：

height: 100vh;

其中'vh'代表瀏覽器窗口的垂直高度。 這使得它可以響應瀏覽器和移動設備的大小調整。