gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:37:36 25 4
gpt4 key购买 nike

请参阅下面的 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/

h1 {
margin: 0;
}

关于html - 为什么在父级大小不变的情况下向 div 添加内容会向页面添加滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38102028/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com