|
|
Posted by Neredbojias on 01/01/08 18:40
Well bust mah britches and call me cheeky, on Tue, 01 Jan 2008 12:59:36
GMT Bazley scribed:
> 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;
> }
It works in Opera <g>.
I dunno, I think it's a long-time flaw in the way Moz and IE typically
render. Probably your best bet is to put a 30-px height div after
"main".
--
Neredbojias
Riches are their own reward.
Navigation:
[Reply to this message]
|