网站底部的空白

Question

I am trying to eliminate this white space at the bottom of my upcoming portfolio site: http://codymiracle.com/

What occurs is the footer seems to either be too long or too short on -most- monitors. Either I get a scroll on really tiny windows, or more commonly larger resolutions produce a small bit of white space that I can't seem to get rid of.

Feel free to use the view page source etc to view my CSS and HTML. I'm not a web designer at heart, only taken one class and this is pieced together slowly. Please let me know if you have found anything that could fix it.

Things I've tried:

• adding height: 100% to my body
• adding overflow: hidden to my contentFooter
• adding overflow: hidden!important to my contentFooter

Answer 1

I had white space at the bottom of all my websites; this is how I solved the matter:

The first and best thing you can do when you are debugging CSS issues like this is to add:

* { border: 1px solid red; }

This CSS line puts a red box around all your HTML elements.

I had white space at the bottom of my page due to a faulty Chrome extension which was adding the div #dp_swf_engine to the bottom of my page:

<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;"></div>

Without the red box, I would have never noticed a 1px div. I then got rid of the faulty extension, and put display:none on #dp_swf_engine as a secondary measure. (Who knows when it could come back to add random white space at the bottom of my page for all my pages and apps?!)

Answer 2

I could not find any white space at the bottom of the page. Though there was some extra space in the footer. if that is what you are referring to then you can use this to remove the extra space.

#contentFooter
{
    height:auto;
    background-color: #9db0ae;

}

The extra space is because of the fixed height of the footer. Setting to height to auto should solve the issue.

Answer 3

Side note: I'm testing in Maxthon.

Firstly, your div#background doesn't take up the whole page, instead taking up the least space it can, and as the footer is inside it, it can't extend beyond this. To fix this, I chose to add

div#background {
    position: absolute;
    height: 100%;
    width:  100%;
}

I then modified the footer as well to stay at the bottom of its parent. Because its parent is absolutely positioned, I can use the easy method of:

div#contentFooter {
    position: absolute;
    width:  100%;
    bottom:  0px;
}

Finally, I moved the <hr> tag inside of the footer so that it stayed with it. I'd normally just use a top border, but this didn't have quite the same look. The page now looks like this.

PS. You will have clipping issues at the bottom of the page if the window is too small, but they would occur anyway because the div#contentBarrier has min-height less than div#background .

Answer 4

I don't see any "white space" at the bottom of your site if by "white space" you mean "space that is white." What browser are you using? Perhaps a browser extension is modifying your page client-side. You may also consider using something like Browsershots to check the extent of your problem.

If you're referring to the space within your footer, you'll need to change the height defined in this CSS declaration:

#contentFooter {
    height: 42px; /* change this number */
}

EDIT: Working on getting you a footer attached to the bottom...

Try setting:

#contentFooter {
   height: 42px;
   background-color: #9db0ae;
   position: fixed;
   bottom: 0;
   width: 100%;
}

#contentBarrier {
   clear: both;
   width: 1200px;
   padding-top: 20px;
   text-align: center;
   height: 100%;
}

Also move your orange hr into your footer. Or, better yet, switch to using CSS borders.

With a little tweaking, that should do it. Your footer would sit at the bottom of the screen no matter the height of the page. If the screen is smaller than the height of your page, content would scroll from under the footer. You might have to add some margin to the bottom of your content block to ensure that no content ever gets stuck under the footer.

Answer 5

Your page layout is 905 pixels high, so it will only fit exactly if the browser window happens to be exactly that high. That might happen with a specific resolution with a specific operating system and a specific browser, but for most people it won't be.

You can make the body element take up the full height of the browser by adding this to the CSS:

html, body { height: 100%; }

Then you can place the footer at the bottom of the body element, and add padding the content so that scrolling works as expected when the window is smaller:

#contentBarrier { padding-bottom: 45px; }
#background > hr { position: absolute; width: 100%; bottom: 42px; }
#contentFooter { position: absolute; width: 100%; bottom: 0; }

Answer 6

对于遇到此问题但不知道该怎么办的其他人，或者上述答案没有回答您的问题：

body {max-height: 100%;}