Menu
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">
<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>
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?
291
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML. CSS.
Conclusion. With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content). However, with no width value provided for the HTML element, setting the width of the body element to 100% results in full page width.
Right click on it and select inspect element. That should give you the information you need.
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.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
