html - 为什么在父级大小不变的情况下向 div 添加内容会向页面添加滚动条？

请参阅下面的 HTML 和 CSS。

当h1标签取消注释后，页面上多了一个滚动条，但不知道为什么。我怀疑这是因为卡片有 position:fixed，但除了 position:fixed 之外，我不知道如何让它们看起来像那样。

我希望 title div 占据屏幕的 20%，而 card-conveyor-belt div 占据屏幕的 80%，无论他们的内容。我该怎么做呢？

HTML:

<body>
<div class="title">
  <!--
  <h1>
  HELLO
  </h1>-->
</div>
<div class="card-conveyor-belt">
  <div class="card left"></div>
  <div class="card center"></div>
  <div class="card right"></div>

</div>
</body>

CSS

html,body{
  height:100%;
  margin:0;
  padding:0;
    background-color:#ccc;
}
.title{height: 20%;width: 100%;}
.card-conveyor-belt{
  height: 80%;
  width: 100%;

 }

.card{
  position:fixed;
  width:80%;
  height:80%;
  background-color:white;
  border-radius:5px;
}
.center{
  left:10%;
}
.left{
  left:-78%;
}
.right{
  left:98%;
}

Here is the same code in a jsfiddle如果您想运行它/与之交互。

最佳答案

只需使用 margin: 0 即可解决您的问题:

Jsfiddle:https://jsfiddle.net/dj3mabgz/