消除垂直div之间的差距

时间：2018-05-24 08:07:58

标签： html css

我正在尝试建立一个个人网站，我一直在使用w3schools的视差滚动效果。我的每个部分都有一个div，但每个div之间有一个20px的间隙，我不知道为什么。任何帮助都会很棒。

我用颜色替换了视差图像，因为我在本地保存了图像，链接可能会过期。我也有jquery 3.3.1，但这可能不重要;我只使用jquery来平滑锚定点击滚动。

CSS＆amp; HTML：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

默认path标记需要一些余量。只需设置边距0即可解决此问题。 检查下面更新的代码段。

h2
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;
}

h2 {
    margin: 0px;
}

答案 1 :(得分：0)

您也可以使用

body > div {
    float: left;
    width: 100%;
}

修复此空间问题

html, body {
    padding: 0;
    margin: 0 auto 0 auto;
    height: 100%;
}
body > div {
    float: left;
    width: 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>

相关问题
最新问题