White space at bottom of site

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

Didn't see any either - I am looking in Chrome... Edit: The way you described the situation is as if you have a sticky footer. — Josh Crozier, Sep 02 '13 at 18:29
Do you mean the footer where the text is at the top? Other than that it looks good. — , Sep 02 '13 at 18:30
the total height of the page will be equal to the height of outerheader + contentBarrier + contentFooter. search for solutions to glue the footer to the bottom of the browser window there are plenty around — andrew, Sep 02 '13 at 18:36
His page is 906px tall. Anything beyond that is white space. That's what he is referring to. — Peter Rasmussen, Sep 02 '13 at 18:37
the "whitespace" is probably only visible on a 1080p + monitor — andrew, Sep 02 '13 at 18:38
open his page and hit F11, that will more likely show what he's referring to — andrew, Sep 02 '13 at 18:43

score 7 · Answer 1 · edited Aug 23 '17 at 19:53

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?!)

heretolearn · Answer 2 · 2013-09-02T19:03:20.713

3

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.

enter image description here

edited Sep 02 '13 at 19:03

answered Sep 02 '13 at 18:38

heretolearn

6,387
4
30
53

I couldn't get this solution working in Maxthon or Chrome. Which browser did you test it in, sshekhar? – dwarduk Sep 02 '13 at 18:56
I tested it in Chrome. Attached the screenshot as reference – heretolearn Sep 02 '13 at 19:00
Thanks. I'm just wondering what screen resolution you use? In 1920x1080 I get [something like this](http://i.imgur.com/hA29MkK.jpg) even with height set to auto. Actually, that's a bad screenshot, but there is a block of white continuing underneath the footer to the bottom of the window.. – dwarduk Sep 02 '13 at 23:08

score 1 · Answer 3 · answered Sep 02 '13 at 18:56

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.

Nathan Arthur · Answer 4 · 2013-09-02T18:44:58.787

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.

All well and good if he is happy with the footer being visible all the time on pages with longer content — andrew, Sep 02 '13 at 18:46
Yes, it would have that effect. We'll have to wait for him to let us know exactly what he's looking for. — Nathan Arthur, Sep 02 '13 at 18:49

score 0 · Answer 5 · answered Sep 02 '13 at 18:50

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

score 0 · Answer 6 · edited Aug 23 '17 at 19:52

0

For anyone else having this issue, and not knowing what to do, or the above answers didn't answer your question:

body {max-height: 100%;}

edited Aug 23 '17 at 19:52

Cody Gray - on strike

239,200
50
490
574

answered Jun 04 '15 at 08:28

user2326923

43
6

White space at bottom of site

6 Answers6

Linked