tags:

views:

72

answers:

4
+4  Q: 

CSS: Why do I get a vertical scrollbar with this simple HTML? (100% height div)

In Firefox 3.5.8 on Windows, I get a vertical scrollbar when I use this HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
<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 anyone explain how to remove it?

Q2. Can anyone explain why there is a cushion of whitespace above the div? Can anyone explain how to remove it?

+5  A: 

Add this:

p {margin: 0; }

Your p element has some margin on the top.

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

Dustin Laine  2010-03-22 21:11:12
As padding is inside the box IIRC it is not needed.
Maciej Piechotka  2010-03-22 21:13:39
Using reset.css like the one from Yahoo! is a must in modern html/css/javascript development. You should try it! You'll get less differences between browsers than without it.
shfx  2010-03-22 22:20:38
+2  A: 

According to firebug it is margin in <p>. At least in 3.6 setting margin-top to p solves problem.

p {
    margin-top: 0;
}
Maciej Piechotka  2010-03-22 21:12:27
+1 for mentioning to use firebug.
Blair McMillan  2010-03-22 21:34:32
+1  A: 

It's the paragraph.

If you add

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

all gets well, including the scroll bar.

Why the paragraph feels entitled to leave its parent element like that, I'm not entirely sure yet.

Pekka  2010-03-22 21:12:50
100% height probably confuses FF. The margin should render inside the div.
Ishmael  2010-03-22 21:15:26
A: 

A1. You are getting a scroll bar because the div has a size of 100% of i browser window not 100%. Because the div is the same size as the browser window but is shifted down a scroll bar is needed to display the bottom of the div.

A2. The whitespace above the div is the top margin of the p element.

Robert Menteer  2010-03-22 21:33:10

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?