如何用css实现div高度自适应占满屏幕
不能使用准确的px值，应该用%作为尺寸的单位。
在样式表中将html,body的高度height设置为100%
在要需要站满屏的div设置width:100%,height:100%
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html {height: 100%;}body {width: 100%;height: 100%;/* background: blueviolet; */}* {margin: 0;padding: 0;}main {width: 100%;height: 100%;background-size: contain;background-color: brown;position: relative;background: blueviolet;}/* section */section {width: 350px;height: 350px;position: absolute;background: white;}section h1 {width: 350px;height: 45px;}#username {border: none;border-bottom: 1px solid #cecece;height: 40px;margin-bottom: 30px;}#word {border: none;border-bottom: 1px solid #cecece;height: 40px;}button {width: 165px;height: 45px;margin-top: 40px;border-radius: 50px;background-color: #56a6ff;border: none;}</style> </head><body><main><section><h1></h1><input type="text" name="账号" id="username" placeholder="账号"><br /><input type="password" name="密码" id="word" placeholder="密码"><br /><button>登录</button></section></main></body></html>
