我有以下标记:
<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: '';
}
关于html - CSS:百分比高度计算为零。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20723861/