Geek Answers Handbook

CSS: Why am I getting a vertical scrollbar using this simple HTML? (100% height)

On Firefox 3.5.8 on Windows, I get a vertical scrollbar when using this 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

Q1. Can anyone explain why?
Can someone explain how to remove this?

Q2. Can someone explain why there is an empty space pillow under the sofa? Can someone explain how to remove this?

+5
source share
4 answers

Add this:

p {margin: 0; }

Your p element has the top edge of the field.

Let me recommend using a CSS reset file. I like YUI one.

+7
source

firebug margin <p>. , 3.6 margin-top p .

p {
    margin-top: 0;
}
+3

.

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

, .

, .

+2

A1. , div 100% 100%. div , , , div .

2. div - p.

0

More articles:


All Articles