Question

html：

<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="qa.css" />
</head>
<body>
<div id="wrap"></div>
</body>
</html>

的CSS：

body {
margin:0;
padding:0;
}

#wrap {
width:750px;
margin-right:auto;
margin-left:auto;
background:#008B00;
}

html文件名为qa.html，css文件名为qa.css 这两个文件位于同一目录中。

Answer 1

嗯......如果没有内容，HTML应该如何显示？

[编辑]为了使它更具体而且听起来不像我在抱怨：在包装器div中放入一些内容，否则它是空的，因此高度为0。

[编辑2]：根据您在评论中描述的预期输出，您希望div占据文档的100％高度。您需要明确指定，即body和#wrap需要高度：100％。甚至更好，最小高度。

Answer 2

如果没有内容且没有设置高度，div将自行折叠。将一些文字或内容放入div，或明确设置最小高度或高度。

修改：请在您的网页中添加doctype;它对预期的渲染有很大的帮助。

Answer 3

绿色div块，填充页面的中间750个像素。

所以，

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrap {
    width: 750px;
    height: 100%;
    margin: 0 auto;
    background: #008B00;
}

为什么这个简单的html和css代码没有显示任何内容？

3 个答案: