Question

在Windows上的Firefox 3.5.8中，当我使用此HTML时，我会得到一个垂直滚动条：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Haloooo1 - T3</title>
<style type="text/css">
  html, body, div {height: 100%; margin: 0; padding: 0; }
  #main {
    width: 320px;
    background:#7C7497;
    height : 100%;
    margin: 0 auto;
  }
</style>
</head>
<body>
<div id='main'>
<p>Hello</p>
</div>
</body>
</html>

alt text http://i42.tinypic.com/ridx21.jpg

Q1。任何人都可以解释原因吗？任何人都可以解释如何删除它？

Q2。任何人都可以解释为什么div上方有空白垫？任何人都可以解释如何删除它？

Answer 1

添加：

p {margin: 0; }

你的p元素在顶部有一些余量。

我建议使用CSS重置文件。我喜欢YUI。

Answer 2

根据萤火虫，margin中的<p>。至少在3.6设置中margin-top到p解决了问题。

p {
    margin-top: 0;
}

Answer 3

这是段落。

如果你添加

 p { margin: 0px; padding: 0px }

一切顺利，包括滚动条。

为什么段落有权保留其父元素，我还不完全确定。

Answer 4

A1。你得到一个滚动条，因为div的大小是我浏览器窗口的100％而不是100％。因为div与浏览器窗口大小相同但向下移动，需要滚动条来显示div的底部。

A2。 div上方的空白是p元素的上边距。

CSS：为什么我用这个简单的HTML得到一个垂直滚动条？（100％高度div）

4 个答案:

CSS：为什么我用这个简单的HTML得到一个垂直滚动条？ （100％高度div）

4 个答案:

CSS：为什么我用这个简单的HTML得到一个垂直滚动条？（100％高度div）