Question

我试图尝试视差滚动，所以我想出了以下HTML，使用Bootstrap框架：

<body>
    <header>
      <div class="logo"></div>
      <nav>
        <ul>
          <li>work</li>
          <li>services</li>
          <li>about</li>
          <li>news</li>
          <li>contact</li>
        </ul>
      </nav>
      <div class="social_media_icons"></div>
    </header>
    <div class="container-fluid">
      <section class="background-fixed">
        <h1 class="title_desc">Company Name</h1>
      </section>
      <section class="description_slide">
        <h2>Partnering with forward-thinking companies to build brands and design the products, services and digital experiences that bring them to life.</h2>
      </section>
      <section class="featured_work">
        <h1>Featured Work</h1>
        <p>Lorem ipsum dolor sit amet, dolorem splendide pri ne, habeo petentium hendrerit sit cu. Usu cibo dolores ei, duo id omnium definiebas, quo te esse illum dissentias. Soleat concludaturque sea at. Illum nobis putent per ex, nec tibique molestiae te, te sea sint quidam. In eum principes consulatu, hinc nemore nominavi his ei.

Nec elitr invidunt et, te exerci elaboraret usu, in dicit noluisse pri. Qui cu facete nostrum, et dico veniam pri. An sit eros velit, commune conclusionemque ius an. Choro molestie sit no, democritum disputando ne has.

Mazim efficiendi voluptatibus sea ne, vitae intellegam adversarium nam ex. Ex habeo libris everti mel, eum et putent nemore utroque. Alii doming aliquip quo et, sed novum discere mediocritatem ei. Te cum agam causae consetetur, qui accusam albucius placerat an, nec at eius phaedrum.

Populo nemore persecuti per et, amet theophrastus ius cu. Eruditi vocibus cu sed, alia erroribus assueverit usu in, his ne meliore rationibus. Malorum laoreet sed in, impetus aperiam et pro. Pro et ludus iriure efficiantur.

Purto lorem scriptorem ei vel, usu invidunt accusata dignissim id. Feugiat constituam et vix, putant platonem per ad. Erat posse ridens sit te, iisque labores eu ius. Ex pri quodsi impetus phaedrum, in dicant officiis vix, ei ponderum deserunt duo.
          </p>
      </section>
      <section class="happy_clients">
        <h1>Happy Clients</h1>
      </section>
    </div>
    <footer>
      <div class="col-md-3">
        Made Together
      </div>
      <div class="col-md-3">
        FIND US

199 Cleveland Street
Surry Hills, NSW 2010
      </div>
      <div class="col-md-3">
        LET'S TALK

Send us an Email
(02) 8006 5089
      </div>
      <div class="col-md-3">
        PROJECT ENQUIRIES

        Let’s get started -
        Project planner
      </div>
    </footer>
  </body>

然后我的css

/* Body */
body{
  margin-top: 90px;
}

.container-fluid {
  padding: 0px;
}

/* Header section */
header{
  top: 0px;
  height: 90px;
  background-color: blue;
  position: fixed;
  width: 100%;
  z-index: 10;
  border-bottom: 1px solid black;
}

nav{
  margin-top: 35px;
  text-align: center;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
  margin-right: 30px;
}

nav ul li:last{
  margin-right: 0px;
}

/* Background slide */
h1.title_desc{
  top: 160px;
  font-size: 70px;
}

section{
  height: 510px;
  width: 100%;
  z-index: 5;
  background-color: white;
  padding: 0px;
  margin: 0px;
}

.background-fixed{
  position: fixed;
  top: 90px;
  z-index: -2;
  background-color: blue;
  text-align: center;
}

/* Slide over bottom slide */
.description_slide{
  background: transparent url('../imgs/trans.png') repeat;
  color: white;
  z-index: 0;
  opacity: 1;
  text-align: center;
}

.description_slide > h2{
  top: 200px;
  position:  relative;
}

/* Rest of the slides */
/* Featured work */


/* Footer */
footer{
  background-color: black;
  color: white;
  height: 100px;
}

如果你看一下JSfiddle（https://jsfiddle.net/ph9x38o5/1/），你可以看到这些部分之间的间距。我尝试将我的部分选项卡上的边距设置为0px，但仍然无效。

任何想法为什么？

（编辑：在JSFiddle的各个部分的右侧还有一个神秘的边缘，只有当你包含Bootstrap时才会出现这种情况。我也想问一下这种情况。 - 我的台式机上没有发生这种情况，这有什么值得担心的吗？）

Answer 1

您看到的保证金是由h1元素引起的。

尝试将以下内容添加到CSS中：

h1 {
    margin-top: 0;
}

您可以在this fiddle中看到它。

编辑：在评论中回答您的问题：这是由body上的填充引起的。尝试将body CSS更改为以下内容：

body {
    margin-top: 90px;
    padding-left: 0;
}

Updated Fiddle

关闭部分的边距，仍然在各部分之间留出空间

1 个答案: