Question

请参阅下面的HTML和CSS。

当取消注释h1标签时，会在页面中添加滚动条，但我不知道原因。我怀疑它是因为这些卡片有position:fixed，但除了title之外，我不知道如何让它们看起来像其他任何方式。

我希望card-conveyor-belt div占据屏幕的20％，而<body> <div class="title">  </div> <div class="card-conveyor-belt"> <div class="card left"></div> <div class="card center"></div> <div class="card right"></div> </div> </body> div占据屏幕的80％，无论其内容如何。我怎么能这样做呢？

HTML：

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

CSS

{{1}}

Here is the same code in a jsfiddle如果您想要与之互动或互动。

Answer 1

只需使用margin: 0来解决您的问题：

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

h1 {
  margin: 0;
}

Answer 2

与其他答案一样，问题在于<h1>标签上的边距。默认情况下（至少在Chrome中是默认设置，不确定其他浏览器），所有<h1>标记的默认边距最高值为0.67em。现在，由于您未定义块在.title块内的位置，因此它会自动将其定位在顶部。结果就像你在图片中看到的那样;

默认边距和默认定位最终“推”所有内容，并强制滚动条出现。

当父级大小不变时，为什么向div添加内容会向页面添加滚动条？

2 个答案: