宽高铺满整个屏幕

一、使用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>