Yo Soy Fiesta Yo Soy Fiesta - 1 year ago 104
HTML Question

Sticky footer covering content

I'm trying to publish my portfolio site and I'm almost done, but I'm having a problem with my sticky footer covering content when there's enough content to need to scroll down. I've tried messing with padding and margins all afternoon but I still can't seem to get it the way I want it.

Portfolio: kevinwallace.io

Basic HTML skeleton:

<div id="wrapper">
<ul id="gallery">


footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 0.425em;
text-align: center;
clear: both;
padding-top: 10px;
color: #ccc;
border-top: 5px solid #cc7a00;

Any help would be appreciated!

Answer Source

Try adding

padding-bottom: 97px;

to your HTML element


html { padding-bottom: 97px; }

97px is the height of your footer.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download