滚动到底部并备份后，页面底部会出现空白区域（移动）

时间：2017-10-21 20:36:51

标签： javascript html css

我刚注意到，当我滚动到我的几个网页的底部时，滚动回到顶部，然后再回到底部，底部会出现一个大的空白区域，背景应该是。我已经看了几个其他解决方案，例如：Random white space at bottom of page but only on mobile，但解决方案似乎没有解决问题。我无法通过选择移动设备来复制Chrome开发者工具的问题，因此我无法排除代码中的错误可能导致行为的问题。以下是其中一个页面的相关代码：

function offset(elementToOffsetBy, elementToOffset, minScreenSize) {
	var width = $(window).width();
	if(width >= minScreenSize) {
		var x = document.getElementById(elementToOffsetBy);
		var height = x.offsetHeight;
		var top_offset = height * -1;
		document.getElementById(elementToOffset).style.top = top_offset + "px";
		document.getElementById(elementToOffset).style.bottom = "0px";
	}
}
body, html {
	height: 100%;
}

#portfolio {
	background: url("https://ndmikkiholicdotcom.files.wordpress.com/2016/06/black-and-white-brick-wall-background-white-brick-wall-image-decoration-picture-white-brick-wall.jpg") no-repeat center center fixed;
	background-size: cover;
}

.topnav {
	overflow: hidden;
}

.topnav a.selected {
	background-color: rgba(242, 242, 242, .3);
	color: #3b4e6b;
}

.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	padding: 20px 25px;
}

.topnav a:hover {
	color: #3b4e6b;
	background-color: rgba(242, 242, 242, .3);
}

.topnav .icon {
	/* Hide icon to expand menu */
	display: none;
}

/* When screen is less than 600px wide, hide all links except the first one, and display the icon to expand the menu */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* When screen is less than 600px wide, display all links vertically when icon is clicked */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	color: #f2f2f2;
	background-color: #3b4e6b;
  }
  
  .topnav.responsive a:hover {
	color: #3b4e6b;
	background-color: #f2f2f2;
  }
}

.portfolio_img {
	width: 80%;
	height: 80%;
	margin-left: 4em;
	margin-right: 4em;
	margin-bottom: 3em;
	margin-top: 3em;
}

.hover_img {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.hover_img:hover img {
	opacity: .2;
}

.hover_img:hover .center_text {
	display: block;
}

.center_text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	font-weight: bold;
}

.col-md-4 {
	position: relative;
	text-align: center;
}

.row {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Portfolio</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
			rel="stylesheet">
		<link href="styles.css" rel="stylesheet" type="text/css">
		<link href="image_styles.css" rel="stylesheet" type="text/css">
		<link rel='shortcut icon' type='image/x-icon' href='logo.ico'/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"	></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="navbar.js"></script>
	</head>
	
	<body id="portfolio">
		<div class="topnav" id="myTopnav">
			<a href="index.html">Home</a>
			<a href="about.html">About</a>
			<a href="#" class="selected">Portfolio</a>
			<a href="contact.html">Contact</a>
			<a class="icon" onclick="myFunction()">&#9776;</a>
		</div>
		
		<div class="container">
			<h1><b>Projects</b></h1>
			<div class="row">
				<div class="col-md-4">
					<div class="hover_img">
						<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Breakout">
						<div class="center_text"><a href="https://github.com/" target="_blank">Breakout</a>.</div>
					</div>
				</div>
			</div>
			
			<h1><b>Websites</b></h1>
			<div class="row">
				<div class="col-md-4">
					<div class="hover_img">
						<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Flashcard App">
						<div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Chemistry Flashcard Web App</a></div>
					</div>
				</div>
				
				<div class="col-md-4">
					<div class="hover_img">
						<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
						<div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Personal Website</a></div>
					</div>
				</div>
				
				<div class="col-md-4">
					<div class="hover_img">
						<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
						<div class="center_text"><a href="https://pixy.org/images/placeholder.png" target="_blank">Website</a></div>
					</div>
				</div>
			</div>

			<h1><b>Publications</b></h1>
			<div class="row">
				<div class="col-md-4">
					<div class="hover_img">
						<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
						<div class="center_text">Author of <a href="https://www.arcadiapublishing.com/" target="_blank">Book</a></div>
					</div>
				</div>
				
				<div class="col-md-4">
					<div class="hover_img">
						<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Red Alert Politics">
						<div class="center_text"><a href="http://redalertpolitics.com" target="_blank">Red Alert Politics</a></div>
					</div>
				</div>
				
				<div class="col-md-4">
					<div class="hover_img">
						<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
						<div class="center_text"><a href="https://www.loneconservative.com" target="_blank">Lone Conservative<a/></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

以下是该页面的截屏： Screenshot

以下是该页面的截屏后： Screenshot

1 个答案:

答案 0 :(得分：0)

在其他用户的帮助下，我能够找到更精确的语言来搜索问题的解决方案。问题是，当滚动到原始视口之外时，将<body>设置为100%并不会为元素提供足够的高度。通过将100%更改为100vh，当滚动超出初始视口时，背景现在会延伸，尽管有轻微延迟。

相关问题
最新问题