一、使用100%设置宽高
1、先设置HTML的高度100%，再设置body高度100%，最后再设置div的高度100%。这样就能铺满屏幕。
原因：一个对象的高度是否可以使用百分比显示,取决于对象的父级对象，父容器必须具有具体的高度信息。如果想让一个元素的百分比css高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。
<style type="text/css">
html {
height: 100%;
}
body{
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
100%高度.png
2、这样出现了滚动条，是因为浏览器默认body有padding和margin，将他们设置为0即可。
<style type="text/css">
html {
height: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
</style>
去掉滚动条.png
二、使用vw和vh
1、vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
2、vh：视窗高度的百分比
直接把div的宽度设置为100vw，高度设置为100vh即可。
3、同样，body的padding和margin设置为0。
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
}
</style>
网友评论