我有一个网页在网络浏览器上运行良好，但当我在手机上访问该网页并向上滚动拇指时，我在不该显示的位置看到了白色内容。
这是触摸之前的网页:
这是我按下背景并向上移动大拇指时的网页:
正如您在第二张图片中看到的那样，在页面底部，页脚和背景图片之间有一个空白区域。
这是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>
最佳答案
更改 body 的 CSS 以包含 background-attachment:fixed;，这样可以防止背景滚动。
body {
margin: 0;
background-image: url('then.jpg');
background-attachment:fixed;
min-height: 100%;
}
关于javascript - 当您在手机上向上滚动我的网页时，底部是白色的。我怎样才能解决这个问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53093558/