Put variable amount of space between content and footer

Hello Digital Point,

Right now (while I have nothing better to use) the background of my website is just its logo, repeating across the page.
But the content itself is on a black background.
See the image:


Notice at the bottom of the page there is some extra space.
There is extra space there because the page's contents don't take up all of the space available.
Is there any way I could add some space between the content and the footer so that the whole thing takes up just enough space to stretch the background? (like this):

As far as I know I'd have to use JavaScript to find how big the space must be and make it that size...
No, I'm not looking to just make a 'sticky footer' that goes to the bottom of the page, I want to actually push it down there.
Adding some <br/> tags wouldn't work because some people have bigger or smaller screens.
Does anyone know how I could accomplish this?

Thanks a lot,
-Tony

 

That makes no sense as it's EXACTLY what you are asking for... Though in general it sounds like you are using javascript to do markup and CSS' job...

... and one google search later... <wendy's lady>WHERE'S THE BEEF?!?</wendy's lady> -- you are using javascript for a whole assload of stuff that has ZERO business being done in javascript -- like your header, footer, etc, etc... Where's your semantic markup? Have you seen what that train wreck of scripting for NOTHING does scripting off?!?

For what you are trying to do, you should likely be using a 100% min-height layout -- that would add the space... To do so, get your markup the blue blazes out of the blasted scripting, so you can build a real layout. You want to 'template' that way, that's SHTML, PHP or ASP's job! You then set html,body { height:100%}, a wrapping DIV around everything before the footer to min-height:100%, pad the bottom of your content wrappers equal to the footer height, then use a negative margin on the footer to ride it up over the content.

No steenkin javascript needed. If you are resorting to scripting for outputting content, markup or layout, yer doing it all wrong!

-- edit -- the same can be said for placing the same class on EVERY element inside a perfectly good parent element with a perfectly good ID on it. See ".navbar" in your code... kind of like using absolute URL's for no reason too.

 

I guess I didn't know exactly what a sticky footer is...
I'm trying to use javascript to include predefined sections of my page like PHP's include or include_once.
What should I do instead? I don't want to include the actual code on each page, I want them to all load a master copy.
I will implement your CSS suggestions today and see how it works!
I'll definitely change the .navbar redundancy, that was probably the first or second thing I ever coded
Did I use absolute URLs somewhere? If so, it was an accident.
Thanks for all of your suggestions and help!

-Tony

 

I changed some things around and now my css code is this:

html,body {
    height:100%;
}
body {
    background-image:url('https://fortninja.com/images/fortn.png');
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
}
#container {
    width: 875px;
    margin:0 auto;
    background-color:black;
    min-height:100%;
    padding:20px;
}
a:link, a:visited {
    color:orange;
}
a:active {
    color:red;
}
.strong {
    font-weight:bold;
}
h1, h2, h3, h4, h5, h6 {
    text-align:center;
    font-family:verdana;
    color:yellow;
    font-weight:bold;
    clear:both;
}
#logo {
    float:left;
}
#footer {
    background-color:orange;
    border-radius:10px;
    text-align:center;
    width:900px;
}
.topwarning {
    background-color:yellow;
    color:red;
    font-weight:bold;
    border-style:solid;
    border-color:red;
    border-width:5px;
}
#stats {
    width:30px;
}
#inwriting {
    font-style:italic;
}
div#qTip {
    padding: 3px;
    border: 1px solid #666;
    border-right-width: 2px;
    border-bottom-width: 2px;
    display: none;
    background: #999;
    color: #FFF;
    font: bold 9px Verdana, Arial, sans-serif;
    text-align: left;
    position: absolute;
    z-index: 1000;
}
.notification {
    clear:both;
    padding:15px;
    border:#D11616;
    background-color:#FFFF33;
    color:#D11616;
}
tb_login {
    display:inline;
}
/* navbar styling begin */
ul#navbar {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    clear:both;
}
ul#navbar>li {
    float:left;
}
ul#navbar>li>a:link, ul#navbar>li>a:visited {
    display:block;
    width:100px;
    font-size:20px;
    color:orange;
    background-color:black;
    text-align:center;
    padding:4px;
    text-decoration:none;
}
ul#navbar>li>a:hover {
    color:black;
    background-color:orange;
}
ul#navbar>li>a:active {
    color:red;
    background-color:yellow;
}
#whyreg {
    width:150px!important;
    color:white!important;
    font-weight:bold!important;
}
/* navbar styling end */
/* skyscraper ad positioning begin */
#leftskyscraper {
    position:absolute;
    left:50px;
    top:15px;
}
#rightskyscraper {
    position:absolute;
    right:50px;
    top:15px;
}
/* skyscraper ad positioning end */
#description {
    width:750px;
    height:200px;
    overflow:auto;
    background-image:url('images/desscriptionbg.jpg');
}
span.uiusername {
    color:#29A629;
}
span.uiusernameval {
    color:#0000E6;
}
span.uicoins {
    color:#E6E65C;
}
span.uicoinsval {
    color:#FFFF33;
}
span.uijoined {
    color:#218221;
}
span.uijoinedval {
    color:#5CE62E;
}
span.uiuploads {
    color:#4E8080;
}
span.uiuploadsval {
    color:#00FFFF;
}
input:focus {
    background-color:mintcream;
}
.icons {
    border:5px outset orange;
}
.icon {
    float:left;
    border:2px solid white;
}
.icon:hover {
    border:5px outset orange;
    font-weight:bold;
}
.iconimg {
    float:left;
}
.infobox {
    float:left;
}

Code (markup):

When I try to confine the footer to a predefined width, it hops over to the left!
What am I doing wrong?

-Tony

 

Because it is after the min-height element, it's not getting the centering from that. Apply margin:0 auto; to #footer.

Just beware you'll need to fix the height of the footer and apply a negative top margin to make it so you don't always have to scroll down to see the footer.