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 设置。将 min-height：100％应用于您要填充浏览器的div。

Similar example here

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

希望这有帮助

Answer 2

最简单的方法就是使用CSS：

height: 100vh;

其中'vh'代表浏览器窗口的垂直高度。这使得它可以响应浏览器和移动设备的大小调整。

浏览器高度100％

2 个答案: