vertical scrolling + margin-bottom

Bazley · Jan 1, 2008

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 help help help help help help help help help help 

help help help help help help help help help help help 

help help help help help help help help help help help 

help help help help help help help help help help help 

help help help help help help help help help help help 
</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;
}

Neredbojias · Jan 1, 2008

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">

</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".

dorayme · Jan 1, 2008

<[email protected]

,

Bazley said:
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" ....
<div id="main">

help

I last snip your doc at the point it goes wrong. Why bother with
XHTML anyway?

But let us not quibble; more importantly, why so much specifying
for heights? Try this simpler variation:

body {background: black;}

#main {
margin: auto;
margin-top: 15px;
margin-bottom: 30px;
width: 300px;
min-height: 750px;
border: 5px solid aqua;
background-color: teal;
}

and use with your doctype.

GTalbot · Jan 1, 2008

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!

Hello Bazley,

It is always better and preferable to upload all your code into a
webpage and then just post an url to such webpage. Over here, I have
to do all that so that I can examine your webpage. Other readers of
your post wishing to examine your code and provide some explanations,
feedback have to do the same thing too.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why a transitional DTD? Your HTML document is certainly, definitely
new.

Also, why XHTML... if you are going to serve that HTML document as
"text/html" and not as "application/xhtml+xml"?

<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" />

Is all your CSS code in the sample below .. or is there more in
mysite.css? Again, uploading your code into a webpage and then posting
an URL would be better for everyone.

</head>
<body>
<div id="main">

help help help help help help help help help help help 

help help help help help help help help help help help 

help help help help help help help help help help help 

help help help help help help help help help help help 

help help help help help help help help help help help 
</div>
</body>
</html>

html, body, main {
margin: 0;
padding: 0;
border: 0;

}

By default, the html element does not have any margin, padding and
border in all modern browsers. You're unneedlessly over-declaring
here.

If you explicitly and specifically want a "30 px permanently at the
bottom of the page", then why do you set all 4 margins of the body
element to 0?

Is it main or #main ? Your CSS code as posted has a parsing error.

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;

You are re-declaring the 4 margins of your #main node here, otherwise
you had earlier a CSS syntax error.

width: 300px;
min-height: 750px;

1- If you want the root element and the body element to fill the
user's browser window viewport's height, then why do you set the #main
to a min-height value? Your CSS declaration is not coherent with the
CSS rules before.

2- If you want the root element and the body element to fill the
user's browser window viewport's height, then why don't you remove the
#main node and transfer its declarations to the body node? Your #main
node duplicates entirely the purpose and function of the body node in
your code. Your DOM tree could be reduced here.

3- if you explicitly wanted to remove the margin-top and margin-bottom
to the body node, then why do you later explicitly set, add a margin-
top and a margin-bottom to the #main node? What you are doing does not
seem to me to be perfectly coherent... otherwise your stylesheet and
DOM tree could be optimized, more compact.

border: 5px solid aqua;
background-color: teal;

}

Regards, Gérard

Ben C · Jan 1, 2008

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! [...]
body {
height: 100%;

This is the first part of the problem. Since body is height: 100%, it's
only the height of the html element, which is the height of the viewport
(you also set height: 100% on that).

#main is much higher than the viewport, so it overflows the body.
There's therefore not going to be a gap of 30px between the bottom of
#main and body.

The browser just allows you to scroll to the bottom of #main and no
further. Maybe some browsers let you scroll to the bottom of its margin,
but they don't have to.

So first remove height: 100%. Now you will find it still doesn't work
because #main's bottom margin collapses against the bottom margin of
body. You want that margin between the bottom of #main and the bottom of
body.

So give body 1px of bottom padding and that will prevent its bottom
margin collapsing against its child. You can change #main's margin to
29px if you're bothered by the 1px.

Or just put 30px of padding-bottom on body and don't use a bottom margin
on #main at all.

Help with my responsive home page	2	Dec 14, 2022
Help with code	0	Jun 12, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Help me sort out this script	1	Oct 17, 2023
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Aligned to the left	3	Apr 19, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Wrong Coding	3	Apr 19, 2023

vertical scrolling + margin-bottom

Bazley

Neredbojias

dorayme

GTalbot

Ben C

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads