代码之家 › 专栏 › 技术社区 › Cheeso

为什么我要用这个简单的HTML得到一个垂直滚动条?(100%高度DIV)

css html

Cheeso · 技术社区 · 14 年前

在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上面有一个空白缓冲区吗?有人能解释如何移除它吗?

4 回复 | 直到 14 年前

Dustin Laine 14 年前

添加:

p {margin: 0; }

你的p元素在顶部有一些空白。

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

Maja Piechotka 14 年前

根据Firebug的说法 margin 在里面 <p> . 至少在3.6设置中 margin-top 到 p 解决问题。

p {
    margin-top: 0;
}

Pekka 14 年前

这是段落。

如果添加

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

一切都很好,包括滚动条。

我还不完全确定为什么这一段觉得有权保留它的父元素。

Robert Menteer 14 年前

A1您得到的是滚动条,因为DIV的大小是浏览器窗口的100%,而不是100%。由于DIV与浏览器窗口大小相同,但向下移动,因此需要滚动条来显示DIV的底部。

A2DIV上面的空白是p元素的上边距。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前