如何用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>