页面检查显示高度一直为0,通过伪类也无法解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用 layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.wrap{
width: 100%;
height:100%;
background-size: cover;
background-image: url("./imgs/11539.jpg");
}
.loginForm{
margin-left: 35%;
margin-top: 10%;
/*background-color: #cccccc;*/
background-color: #e7e7e7;
width: 400px;
height: 350px;
float: left;
z-index: 9999;
position: fixed;
opacity: 0.75;
}
.usernameDiv{
width: 360px;
height: 40px;
padding-left: 70px;
padding-top: 30px;
}
.adminInput{
width: 260px;
height: 40px;
font-size: 15px;
border-radius: 0.5em;
/*margin-left: auto;*/
/*border: 1px solid #cccccc;*/
}
.passwordDiv{
width: 360px;
height: 40px;
padding-left: 70px;
padding-top: 28px;
}
i{
position: absolute;
}
.adminIcon{
font-size: 22px;
margin-top: 8px;
margin-left: 230px;
}
.logoHead{
width: 250px;
height: 60px;
text-align:center;
padding-left: 70px;
padding-top: 25px;
}
.loginHeadText{
height:60px;
line-height:60px;
font-weight:bold;
font-size:20px;
}
.usernameWrapDiv{
width: 400px;
height: 70px;
}
.submitDiv{
height: 70px;
padding-top: 28px;
}
.submit{
width: 260px;
height: 40px;
margin-left: 70px;
border-radius: 0.5em;
}
img{
position: absolute;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content:" ";
height: 0px;
font-size: 0px;
display:block;
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="loginForm">
<form id="loginForm">
<div class="logoHead">
<div class="loginHeadText">
管理员登录
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameDiv">
<i class="layui-icon layui-icon-username adminIcon"></i>
<input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
</div>
</div>
<div class="usernameWrapDiv">
<div class="passwordDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
</div>
</div>
<div class="usernameWrapDiv">
<div class="submitDiv">
<input id="loginBtn" type="button" class="submit layui-btn layui-btn-normal" value="登录"></input>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
body，html的高度没有指定
position: absolute;导致的高度塌陷除了设置一个具体的父元素高度外无法通过css的方式去解决。具体你可以找找高度塌陷相关问题，里面有详细的解释和解决方案你整个position: fixed;当然不会有高度呀