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

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

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    lt style gt         margin  0     padding  0     lt  style gt    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

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

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

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

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

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

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

Examples related to css