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;
}
当我使用谷歌的开发工具时，div.slide的尺寸为1074 x 208像素，标题的尺寸为1068 x 0像素。为什么标题的高度计算为零？我希望它是其父级的 10%。
您需要清除浮点数。通过将两个元素漂浮在header内，它就会坍缩成自身。
添加以下内容，这是标准清除修复：
header:after {
display: table;
clear: both;
content: '';
}
演示
因为当您浮动标题的内容元素时，它们会从文档流中删除，并且标题会折叠，因为它基本上没有内容。
将overflow:auto添加到标题的 CSS 规则中，您将获得高度恢复。
js小提琴示例
由于子元素全部设置为浮动，因此该元素呈现为"空"。
以百分比表示高度不是一个好主意。 尝试阅读百分比高度 HTML 5/CSS 和高度百分比（当父级具有最小高度而没有高度时以百分比表示）
要以百分比表示高度，
- 您需要具有父元素的高度。
- 如果你看到你的幻灯片div，它就在身体下面。所以它没有用。
- 身体没有任何高度，因此您的身高被计算为零。
这是浮点崩溃。如果浮动元素具有非浮动父元素，则父元素将折叠，并且看起来高度 = 0。
您可以使用 3 种解决方案来解决此问题：
- 浮动父项。
- 将高度设置为父级（例如 100px）
- 设置父
overflow:auto