时间戳

首页 > 解决方案 > 为什么 height: 100% 不在这个 div 上工作？

html - 为什么 height: 100% 不在这个 div 上工作？

问题描述

这个问题似乎很简单。就像一个好书呆子一样，我已经完成了我的研究。我发现的所有内容都表明，对于具有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非常明显是窗口的高度。当我将鼠标悬停在#contentdiv 上时，我可以在开发工具中看到它显示的样式height: 100%，但高度为 0px。我很困惑。有任何想法吗？

标签： htmlcss

解决方案

在body元素中，您需要一个“真实”height设置 - 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>

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

推荐阅读