|
Posted by Bazley on 01/01/08 12:59
I have added margin-bottom: 30px; to the 'main' div (all code below),
in an attempt to leave 30 px permanently at the bottom of the page.
But when the content of the main div extends beyond the bottom of the
screen and a scroll bar appears, it stops scrolling after the border
of main and ignores the margin. What's the problem? Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mysite</title>
<link rel="stylesheet" type="text/css" href="mysite.css" />
</head>
<body>
<div id="main">
help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
</div>
</body>
</html>
html, body, main {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: black;
}
#main {
position: relative;
top: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 30px;
width: 300px;
min-height: 750px;
border: 5px solid aqua;
background-color: teal;
}
[Back to original message]
|