【发布时间】：2018-11-03 09:00:39
【问题描述】：
我正在尝试建立一个个人网站，我一直在使用w3schools 的视差滚动效果。我的每个部分都有一个 div，但每个 div 之间有 20px 的间隙，我不知道为什么。任何帮助都会很棒。
我用颜色替换了视差图像，因为我将图像保存在本地并且链接可能会过期。我也有 jquery 3.3.1，但这可能无关紧要；我只使用 jquery 来平滑滚动锚点点击。
CSS 和 HTML：
html, body {
padding: 0;
margin: 0 auto 0 auto;
height: 100%;
}
#header {
width: 100%;
margin: 0px;
padding: 12px 0px;
float: left;
background: rgba(238, 238, 238, 0.5);
position: fixed;
font-family: Arial;
font-size: 20px;
}
#header-right {
float: right;
}
#header a {
vertical-align: middle;
margin: 15px;
text-decoration: none;
color: #000000;
}
#header a:hover {
color: #909090;
}
.parallax-window {
min-height: 400px;
background: transparent;
}
.content {
padding-top: 60px;
display: block;
background-image: url('kalle-kortelainen-242413-unsplash.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#intro {
min-height: 800px;
padding-top: 60px;
background-color: #ef69a1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#about {
min-height: 800px;
padding-top: 60px;
background-color: #82ff9e;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#projects {
min-height: 800px;
padding-top: 60px;
background-color: #2092e4;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#contact {
min-height: 800px;
padding-top: 60px;
background-color: #dfee80;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="test.css" rel="stylesheet">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- Script for smooth scrolling on anchor link click -->
<script type="text/javascript">
$(document).ready(function() {
var height = 0 // Dist to not travel so header doesn't cut off section on scroll
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top-height
}, 500);
});
});
</script>
<div id="header">
<a href="#intro">Bob</a>
<div id="header-right">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<a href="Stella_Lu_Resume.pdf" target="_blank">Resume</a>
</div>
</div>
<div id="intro">
aksdhgflha
</div>
<div id="about">
<h2>About</h2>
</div>
<div id="projects">
<h2>Projects</h2>
</div>
<div id="contact">
<h2>Contact</h2>
</div>
</body>
</html>【问题讨论】：
-
您需要查看折叠边距 - 这就是导致间隙的原因（您的 h2 的底部边距正在折叠）您可以通过在 div 中使用 1px 底部填充来修复它：
body > div { padding-bottom:1px; }