Question

我有以下标记：

<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像素。为什么标题的高度计算为零？我希望它是其父母的10％。

Answer 1

你需要清除浮子。通过将两个元素浮动到header内，它会自动折叠。

添加以下内容，即标准的clearfix：

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

<强> Demo

Answer 2

由于您的子元素all都设置为浮动，因此该元素将呈现为“空”。

Answer 3

因为当您浮动标题的内容元素时，它们会从文档流中删除，并且标题会折叠，因为它基本上没有内容。

将overflow:auto添加到标题的CSS规则中，您将恢复高度。

<强> jsFiddle example

Answer 4

使用高度百分比不是一个好主意。试试看 Percentage Height HTML 5/CSS和Height in percent when parent has min-height and no height

以百分比形式使用高度

您需要拥有父元素的高度。
如果您看到幻灯片，它就在身体下方。所以它没有用。
身体没有任何高度，因此你的身高被计算为零。

Answer 5

这是浮动崩溃。如果浮动元素具有非浮动父元素，则父元素将折叠并且看起来具有height = 0。

您可以使用3种解决方案来解决该问题：

浮动父母。
将高度设置为父级（例如100px）
设置父overflow:auto

CSS：计算为零的百分比高度。为什么？

5 个答案: