CODEWITHSUNDEEP
htmlcssfooter
audiFanatic
audiFanatic

Reputation: 2494

Removing whitespace beneath footer with CSS (Wordpress)

I just revamped my website and I'm having a bit of trouble with the fine details (keep in mind that I know almost nothing about web development, even though I'm in the software field; I'm trying to learn).

Namely, I noticed on some of my smaller pages (my About page, for example) have a white bar going across the screen underneath the footer. I'd much rather have the footer dynamically extend itself to the bottom of the screen. How can I do this, can I write some custom CSS?

Here's my site: http://frankpernice.com/resume/

Upvotes: 0

Views: 53

Answers (3)

matthew
matthew

Reputation: 31

Aibrean is correct, you need to use a sticky footer similar to that proposed in the link here...

http://ryanfait.com/html5-sticky-footer/

Alternatively you could apply position: fixed; and bottom: 0; to your 'footer' element, but this would bring problems when working with pages that have content that stretches beyond your window height.

Matt

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55613

Thanks to flexbox, sticky footers (including those without a fixed height - because hardly anything that is responsive can have a fixed height) have become dead simple (depending on the markup of your page). Fortunately, your markup is excellent for it:

html,body { height:100%; }
body { display: flex; flex-direction: column; }
body>section { flex: 1 0 auto; }

Upvotes: 1

user4431269
user4431269

Reputation:

Change to fixed poistion ;-)

.footer-bg {
    position: relative;
}

.footer-bg {
    position: fixed;
    bottom: 0;
}

Upvotes: 1

Related Questions