为什么 height: 100% 不在这个 div 上工作？ [复制]答案

【问题标题】：Why isn't height: 100% working on this div? [duplicate]为什么 height: 100% 不在这个 div 上工作？ [复制]
【发布时间】：2018-10-02 19:03:31
【问题描述】：

这个问题看起来很简单。就像一个好书呆子一样，我已经完成了我的研究。我发现的所有内容都表明，对于拥有height: 100% 的东西，每个嵌套的父元素都必须有一个高度才能填满子 div。这正是我所拥有的。

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

    <body>
        <div id="content"></div>
    </body>
</html>

这就是我所有的 HTML。我刚刚开始了这个项目，这也是我如此困惑的部分原因。我的 CSS 如下所示：

html, body {
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: lightcoral;
}

就是这样。这就是我的全部代码。 #content 的背景颜色是专有的，所以我可以看到它占用的空间。如果我在 div 中添加文本或将其高度更改为 CSS 中的像素值，则会显示颜色。如果我把它切换回这个，它就会消失。此外，我在 Chrome 中工作，当我将鼠标悬停在开发工具的 Elements 选项卡中的源代码上时，html 和 body 都非常清楚地显示了窗口的高度。当我将鼠标悬停在#content div 上时，我可以在开发工具中看到height: 100% 的样式，但高度为0px。我很困惑。有什么想法吗？

【问题讨论】：

div 高度 = div 内容，因此没有内容 = 100% 高度为 0。使用 px 添加一个最小高度以获得恒定颜色的 div
body高度为auto，div高度为100%，auto的100%为auto
@Quentin body 的高度是100%，我手动设置的。
@ElleNolan 正文有 min-height - 不是 height，height 仍将是 auto
@ThisGuyHasTwoThumbs 如果是这样的话，有没有可能把 div 做成那么高？我想要min-height: 100%，但如果它只会延伸到其内容，那么这是徒劳的练习。我的 flexbox 问题有什么解决方案吗？

标签： html css

【解决方案1】：

在body 元素中，您需要一个“真实的”heightsetting - min-height: 100%; 不足以作为相对子元素高度设置的参考。所以将min-height: 100%; 更改为height: 100%;。

html, body {
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: lightcoral;
}

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

    <body>
        <div id="content"></div>
    </body>
</html>

P.S.：您的结束 <body> 标记缺少 / 字符 - 我在您的代码中将其更改为 </body>

【讨论】：

缺少