Question

在下面的html代码行中，div元素扩展到页面的整个高度。为什么添加<!DOCTYPE html>不会使页面占据100％的高度？如何在添加<!DOCTYPE html>的情况下获得100％的高度？

<html lang="en">
<head>
    <style type="text/css">
        #menu {
            background: green;
            height: 100%;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="menu">
        Menu
    </div>
</body>
</html>

Answer 1

将以下内容添加到“样式”部分：

html, body {
    height: 100%;
}

您的内容未达到100％高度的原因是因为它在您使用百分比时从其父元素继承。 div#menu的父级为body，body没有固有高度。 body的父级为html，html也没有固有高度。 html的父级是文档/视口本身，的固有高度为100％。

我个人也建议您为CSS使用外部样式表。

包含a时高度不同的结果

1 个答案: