Question

这个问题似乎很简单。像个好书呆子一样，我已经完成了研究。我发现的所有内容都表明，要使某事物具有<svg>，每个嵌套的父元素必须具有一定的高度，以便子div能够填充。而这正是我所拥有的。

height: 100%

这实际上是我的全部HTML。我刚开始这个项目，这就是我很困惑的原因的一部分。我的CSS看起来像这样：

<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, body { padding: 0; margin: 0; } html { height: 100%; } body { min-height: 100%; } #content { width: 100%; height: 100%; background-color: lightcoral; }的背景颜色是唯一的，因此我可以看到它占用的空间。如果我在div中添加文本或在CSS中将其高度更改为像素值，则会显示颜色。如果我将其切换回此位置，它将消失。另外，我在Chrome中工作，当我将鼠标悬停在开发工具的“元素”标签中的源代码上时，#content和html都非常清楚窗口的高度。当我将鼠标悬停在body div上时，可以在开发工具中看到#content处的样式，但高度为0px。我很困惑。有什么想法吗？

Answer 1

在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>

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

为什么不是身高：100％在这个div上工作？

1 个答案: