I've uploaded the web page I'm having trouble with to try and make it easier to understand. The problem I'm having is when you look at the page, you can see part of the grey background at the top of the page, but not at the bottom. But I want to make it so that you can see part of the grey background at the bottom of the page (like you can at the top of the page). Below is the CSS code I've created.

body	{background-color: #999;}

#wrapper	{
	margin: auto;
	padding: 0px;
	width: 1000px;
	background-color: #FFF;
}

 

Is there anyway I can do this? I know it can be done easily by adding a height property in the body section, such as:

body	{background-color: #999; height: 200px;}

The problem is I don't have a height property set on the wrapper div (so that the div expands automatically as I add content to it), so I wouldn't be able to create a set height for the body (as shown above). Is there anything else I can do?

 

Thank you for any help.

index.html

 body {

background-

color: #999; 

padding-bottom:200px;

}

Give you html a background:

html{ background:#999;}

 

and you can safely remove the body height.

I thought he wanted some extra "white space" below his wrapper

 

 body {
background-
color: #999; 
padding-bottom:200px;
}

Thank you for your suggestion, but it doesn't seem to work.

 

Is there anyway to add an 'auto height' property, but then add an 'extension' to it? So that if the wrapper div tag is 350px in height, the background would be 400px in height (by adding an extra 50px to the auto height property of the wrapper div tag).

Edited April 10, 201313 yr by dandydan1152

you could always just add a extra empty div in the bottom of your wrapper with a height of 50px.

you could always just add a extra empty div in the bottom of your wrapper with a height of 50px.

 

I think this is the easiest way

you could always just add a extra empty div in the bottom of your wrapper with a height of 50px.

I think I might be doing something wrong, because I can't get it to work.

 

This is the CSS I have:

#expansion {
width: 1000px;
height: 50px;
background-color: #999;
}

This is how I inserted the div tag using HTML:

<div id="wrapper">
<div id="header">Header content</div>
<div id="menu">This is for the menubar</div>
<div id="text">For the text</div>
<div id="footer">This is where the footer content goes</div>
<div id="expansion"></div>
</div>

I've tried changing the 'height: 50px;' to 'min-height: 50px;', but it still doesn't work. What am I doing wrong?

 

Thank you for your help.

Edited April 11, 201313 yr by dandydan1152

Thank you for your help everyone, I've sorted it now. I just inserted an image (which was just a rectangle the same colour as the background) at the bottom of the page, and it worked.

 

Thanks again everyone.