CSS white space at bottom of page despite having both min-height and height tag

Question

I am unable to get the white space at the bottom of this page to disappear   I have both min-height and height tags in body   Any suggestions   Thanks   http   womancareolympia webs com

User · Answer

Try setting the height of the html element to 100  as well   html       min-height  100       overflow-y  scroll        body        min-height  100       Reference from this answer

User · Answer

This will remove the margin and padding from your page elements, since there is a paragraph with a script inside that is causing an added margin. this way you should reset it and then you can style the other elements of your page, or you could give that paragraph an id and set margin to zero only for it.

<style>
* {
   margin: 0;
   padding: 0;
}
</style>

Try to put this as the first style.

User · Answer

The problem is the background image on the html element. You appear to have set it to "null" which is not valid. Try removing that CSS rule entirely, or at least setting background-image:none

EDIT: the CSS file says it is "generated" so I don't know exactly what you will be able to edit. The problem is this line:

html { background-color:null !important; background-position:null !important; background-repeat:repeat !important; background-image:url('http://images.freewebs.com/Images/null.gif') !important; }

I'm guessing you've put null as a value and it has set the background to a GIF called 'null'.

User · Answer

The problem is how 100  height is being calculated   Two ways to deal with this   Add 20px to the body padding-bottom  body       padding-bottom  20px      or add a transparent border to body  body       border  1px solid transparent      Both worked for me in firebug  In defense of this answer  Below are some comments regarding the correctness of my answer to this question  These kinds of discussions are exactly why stackoverflow is so great  Many different people have different opinions on how best to solve the problem  I ve learned some incredible coding style that I would not have thought of myself  And I ve been told that readers have learned something from my style from time to time  Social coding has really encouraged me to be a better programmer   Social coding can  at times  be disturbing   I hate it when I spend 30 minutes flushing out an answer with a jsfiddle and detailed explanation only to submit and find 10 other answers all saying the same thing in less detail  And the author accepts someone else s answer  How frustrating  I think that this has happend to my fellow contributors   in particular thirtydot   Thirtydot s answer is completely legit  The p around the script is the culprit in this problem  Remove it and the space goes away  It also is a good answer to this question   But why  Shouldn t the p tag s height  padding and margin be calculated into the height of the body    And it is  If you remove the padding-bottom style that I ve suggested and then set the body s background to black  you will see that the body s height includes this extra p space accurately  you see the strip at the bottom turn to black    But the gradient fails to include it when finding where to start  This is the real problem   The two solutions that I ve offered are ways to tell the browser to calculate the gradient properly   In fact  the padding-bottom could just be 1px   The value isn t important  but the setting is   It makes the browser take a look at where the body ends   Setting the border will have the same effect   In my opinion  a padding setting of 20px looks the best for this page and that is why I answered it this way   It is addressing the problem of where the gradient starts   Now  if I were building this page   I would have avoided wrapping the script in a p tag  But I must assume that author of the page either can t change it or has a good reason for putting it in there   I don t know what that script does   Will it write something that needs a p tag   Again  I would avoid this practice and it is fine to question its presence  but also I accept that there are cases where it must be there   My hope in writing this  defense  is that the people who marked down this answer might consider that decision  My answer is thought out  purposeful  and relevant   The author thought so   However  in this social environment  I respect that you disagree and have a right to degrade my answer  I just hope that your choice is motivated by disagreement with my answer and not that author chose mine over yours

User · Answer

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 css 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:

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

User · Answer

There is a second paragraph in your footer that contains a script   It is this that is causing the issue

User · Answer

It is happening Due to    lt p gt  lt script gt var  nwls    if window jQuery amp  amp window jQuery find   nwls jQuery find   fw link newWindow    else if document getElementsByClassName   nwls document getElementsByClassName  fw link newWindow    else if document querySelectorAll   nwls document querySelectorAll   fw link newWindow    else document write   lt scr   ipt src  http   static websimages com static global js sizzle sizzle min js  gt  lt   scr   ipt gt    if window Sizzle   nwls Sizzle   fw link newWindow       var numlinks  nwls length for var i 0 i lt numlinks i     nwls i  target   blank    lt  script gt  lt  p gt    Remove  lt p gt  lt  p gt  around the script

User · Answer

I faced this issue because my web page was zoomed out to 90  and as I was viewing my page in responsive mode through the browser developer tools  I did not notice it right away

User · Answer

I had the same problem when parsing html to string  Removing the last  lt p gt  lt  p gt   and replacing it with an alternative if desirable  like  lt   br gt   solved it for me

User · Answer

class ID  after   content none      Always works for me class or ID can be for a div or even body causing the white space

User · Answer

I find it quite remarkable that out of 6 answers, none of them have mentioned the real source of the problem.

Collapsing margins on the last p inside #fw-footer is where that extra space is originating from.

A sensible fix would be to add overflow: hidden to #fw-footer (or simply add margin: 0 on the last p).

You could also just move the script inside that last p outside of the p, and then remove the p entirely; there's no need to wrap a script in a p. The first p (#fw-foottext) has margin: 0 applied, so the problem won't happen with that one.

As an aside, you've broken the fix I gave you in this question:

CSS3 gradient background with unwanted white space at bottom

You need html { height: 100% } and body { min-height: 100% }.

At the moment, you have html { height: auto } being applied, which does not work:

(This happens with a window taller than the content on the page)

[css] CSS white space at bottom of page despite having both min-height and height tag

The answer is

Examples related to css

Tags