javascript - 当您在手机上向上滚动我的网页时,底部有白色。我怎样才能解决这个问题?
问题描述
我有一个在网络浏览器上运行良好的网页,但是当我在手机上访问该网页并向上滚动拇指时,我看到了不应该出现的白色内容。
这是触摸之前的网页:
这是当我按下背景并向上移动拇指时的网页:
正如您在第二张图片中看到的那样,在页面底部,页脚和背景图片之间有一个空白区域。
这是CSS:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
background-image: url('then.jpg');
min-height: 100%;
}
display: block;
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
.form {
margin: 0 auto;
margin-top: 40px;
width:350px;
height:35%;
font-family: Impact, Charcoal, sans-serif;
border: 1px solid;
box-shadow:5px 10px;
border: 1px solid #ccc;
background-color: white;
overflow: hidden;
display: block;
text-align: center;
}
#yourinfo{
font-size: 35px;
}
#nextBttn {
width:135px;
height:25px;
}
.topnav {
overflow: hidden;
background-color: black;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
filter: none;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.navbar {
overflow: hidden;
background-color: black;
position: fixed;
bottom: 0;
width: 100%;
overflow: hidden;
margin-bottom: 0;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.form a:not(:first-child) {display: none;}
.form a.icon {
float: right;
}
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
这是HTML:
<body >
<div class="background-image"></div>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="form">
<form name="firstForm"method="post" id="form1" action="http://localhost:8080/connect.php">
<header id="yourinfo"><b>Your information</b></header><br><br><br>
<label id="nameLabel">Name:</label><br>
<input id="nameInput"type="text"><br><br>
<label id="ageLabel">Age:</label><br>
<input id="ageInput"type="text" width="55%"><br><br>
<label id="emailLabel">Email Address:</label><br>
<input id="emailInput" type = "text"><br><br>
<label id="phoneLabel">Phone:</label><br>
<input id="phoneInput" type="text"><br><br>
<br>
<input id="nextBttn" type="submit" value="Next">
<br>
<br>
</form>
</div>
<div class="navbar">
<a href="#home" class="active">Contact us</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
解决方案
将您的 CSS 更改body
为 include background-attachment:fixed;
,这应该可以防止背景滚动。
body {
margin: 0;
background-image: url('then.jpg');
background-attachment:fixed;
min-height: 100%;
}
推荐阅读
- r - “无法分配大小为 xxx mb 的向量”错误,似乎无法修复
- amazon-web-services - 调用 CreatePolicy 操作时出现 MalformedPolicyDocument - AWS
- angular - 将 Angular EventEmitter.emit() 作为回调传递
- python - 如何在特殊情况下省略自定义日志记录处理程序?
- visual-studio-code - 为在 WSL 中运行的 VS Code 设置不同的配色方案
- sql - 如何找到一个表与不同表的关系?
- javascript - javascript 的 getElementsByClassName 长度不能以角度工作
- flutter - 如何从集成测试中选择颤振时间选择器中的时间
- python-3.x - 在测试运行期间从 Chrome 捕获日志。Python
- node.js - 即使我安装了 cors 并且设置了标头,也会出现 CORS 错误