gpt4 book ai didi

html - CSS:百分比高度计算为零。为什么?

转载 作者:太空宇宙 更新时间:2023-11-04 04:10:48 26 4
gpt4 key购买 nike

JSFiddle

我有以下标记:

<body>
<div class="slide">
<header>
<p id="progress">3/20
</p>
<!-- hfill -->
<p id="timer">20:00
</p>
</header>
<div class="question">
<p id="question">What is 2+2?
</p>

...和 ​​CSS:

img {
display: block;
}

.slide {
border: 3px solid black;
margin: 5% 10%;
width: 80%;
height: 100%;
}

header {
margin: 0;
height: 10%;
}

header p {
margin: 0;
font-size: 300%;
}

#progress {
float: left;
}

#timer {
float: right;
}

当我使用 Google 的开发工具时,div.slide 的尺寸为 1074 x 208 像素,标题为 1068 x 0 像素。为什么 header 的高度计算为零?我希望它是其 parent 的 10%。

最佳答案

您需要清除 float 。通过在 header 中 float 这两个元素,它会折叠成自身。

添加以下内容,这是标准的 clearfix:

header:after {
display: table;
clear: both;
content: '';
}

Demo

关于html - CSS:百分比高度计算为零。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20723861/

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