Yo Soy Fiesta Yo Soy Fiesta - 1 month ago 19
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:

<body>
<header>
<nav>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
</li>
</ul>
</section>
</div>
<footer>
</footer>
</body>


Footer:

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

Try adding

padding-bottom: 97px;

to your HTML element

EDIT

html { padding-bottom: 97px; }

97px is the height of your footer.

Comments