چرا این صفحه Scrollable می شود؟!
سلام ب همه.
من ی صفحه لاگین دارم که می خوام توی WebBrowser استفاده کنم ولی بدون در نظر گرفتن فرم اندازه اش بطوری زیاد می شه که صفحه Scroll نمایش می ده:
SharedScreenshot24.jpg
اما زمانی که همین صفحه رو در مرورگر MSEdge اجرا می کنم هیچ Scroll نمی شه تا زمانی که به اندازه فرم کوچیک بشه....
SharedScreenshot25.jpg
راه حل درست شدنش چی می تونه باشه!؟؟!
<!DOCTYPE html>
<html lang="fa">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title></title>
<style media="screen">
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #080710;
height: 100% !important;
}
.background{
width: 100%;
height: 100%;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
}
.shape:first-child{
background: linear-gradient(
#1845ad,
#23a2f6
);
left: -80px;
top: -80px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ff512f,
#f09819
);
right: -30px;
bottom: -80px;
}
form{
height: 520px;
width: 400px;
background-color: rgba(255,255,255,0.13);
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
padding: 50px 35px;
}
form *{
font-family: 'Poppins',sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3{
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}
label{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input{
display: block;
height: 50px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder{
color: #e5e5e5;
}
button{
margin-top: 50px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social{
margin-top: 30px;
display: flex;
}
.social div{
background: red;
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255,255,255,0.27);
color: #eaf0fb;
text-align: center;
}
.social div:hover{
background-color: rgba(255,255,255,0.47);
}
.social .fb{
margin-left: 25px;
}
.social i{
margin-right: 4px;
}
</style>
</head>
<body>
<!--<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>-->
<form>
<h3>Login Here</h3>
<label for="username">Username</label>
<input type="text" placeholder="Email or Phone" id="username">
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password">
<button>Log In</button>
<div class="social">
<div class="go"><i class="fab fa-google"></i> Google</div>
<div class="fb"><i class="fab fa-facebook"></i> Facebook</div>
</div>
</form>
</body>
</html>
پاسخ با نقل قول