How to remove the white space under my footer in Wordpress?

css wordpress wordpress-theming editing removing-whitespace

26,403

Solution 1

You have whitespace under the footer because the content is not sufficient to push it past the bottom of the monitor at higher resolutions.

I'd recommend using the Sticky Footer to handle this. It allows the minimum height of the body to be that of the browser, regardless of how little content is in the page.

The sticky footer solution requires some specific HTML to be included, and some basic CSS. Here's a Fiddle of Ryan Fiat's sticky footer in action using the code from his example.

The code goes like this:

HTML:

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Footer content here</p>
    </div>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
    background-color:#eaeaea;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
    border:solid 1px red;
}
.footer, .push {
    height: 155px; /* '.push' must be the same height as 'footer' */
}
.footer {
    border:solid 1px blue;
}

Looking at your markup, you can use your existing div class="clear"></div> as your .push div, then you only need to add the div class="wrapper"> around your content.

Solution 2

Try something like this

  
html {
   height: 100%;
}

body {
  height: 100%;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
}

footer {
  flex-shrink: 0; 
 }


.futovac {
  flex: 1;
 }

<html>
<body>
<main></main>
<div class="futovac"></div>
<footer></footer>
</body>

</html>

DEMO: https://help.podio.com/hc/en-us

26,403

Author by

RNDM

Updated on July 15, 2020

Comments

RNDM almost 4 years
I have basic coding experience. In my Wordpress install, some of my pages have a blank white space under the footer that I would like to remove. I have tried several solutions but to no avail. The problem is persistent on chrome, Firefox, IE etc.

I'm not really sure of the cause, but the size of the white space changes depending on computer/browser/resolution.

As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS.

I would like a footer that sticks to the bottom of the browser window with no whitespace below it.

Q. Please provide me with code/solution that will remove the white spaces below the footer on my website (preferably custom CSS method).

You can find an example of the white space on my website here. (try viewing on a browser resolution higher than 1280x800)

Solutions i've tried:
1. #footer {overflow: hidden;} didn't work
2. Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my css but that didn't work
3. #copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
RNDM over 9 years

Good description of what is going on but I have to stress that I'm not experienced with code so I don"t know how to implement this. Also i only have access to the Wordpress themes PHP & CSS files...no HTML.
Timmah over 9 years

That's ok, Wordpress assembles the HTML sent to the browser by storing it in various PHP files. If you can access the PHP, you can alter the HTML within :) I'd be checking out the Wordpress Codex, extremely useful for learning what goes where
RNDM over 9 years

I can access all the PHP. I understand most of the links in the Codex---still not sure which php file acts as the "index". Do you know?
Timmah over 9 years

Wordpress isn't my strong suit, but under your Theme folder, there'd be one file called 'footer.php' (or similar), where you can manipulate the footer code. As for the rest, this post might be a good place to start.
RNDM over 9 years

Posts were informative and found the footer thanks. CSS is currently placed in the custom CSS. Where would I put the HTML in the footer PHP. Here is my fiddle for my footer jsfiddle.net/9wpbu69L
Timmah over 9 years

it looks like most of the footer content is conditional (i.e. will not be included in the HTML unless certain conditions are met), but I don't know enough about your site structure to advise :( If it was me, I'd start simple and go off the Sticky Footer example. HTML is easiest when you start outside and work your way in.
RNDM over 9 years

Hmmm. How would i go about "starting simple?" and do you mean go for the sticky example instead of "off"?