本文介绍了如何通过CSS实现全屏且自适应高度的网页布局。首先，通过设置div的`position:absolute; top:0; left:0; right:0; bottom:0;`实现最外层盒子的绝对定位。接着，为html, body, div设置100%高度并应用`box-sizing:border-box;`确保边框包含在内。最后，使用`min-height:100vh`让内部盒子填充剩余高度，实现全屏效果。
一：给最外层的盒子设置绝对定位
div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
二：给html,body，div设置高度100%(在vue文件中，在index.html文件中设置该样式命令)
<style>
html,body,div{
height:100%;
box-sizing:border-box;
padding: 0;
margin: 0;
}
</style>
三：让一个盒子自适应填满剩下的高度，在该div加min-height：100vh即可
div{
min-height:100vh
}
扫一扫
2068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
