Keep footer at bottom but not sticky?

Question

My basic layout is simple:

header {
    background: red;
}

main {
    background: aqua;
    font-size: 48px;
}

footer {
    background: grey;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

<header>head</header>
<main>
Curabitur aliquam convallis luctus. Vestibulum dolor turpis, consectetur a placerat eget, pellentesque id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</main>
<footer>foot</footer>

If I make my footer position:fixed it does stay at the bottom of the page, but is a "sticky" footer and covered content when scrolling is needed.

I would like to keep the footer at the bottom, but not be fixed.

Is this even possible to do with pure CSS?

JSFiddle

Answer 1

There is position:absolute;. This Is a CSS property that allows you to control the exact location of any element. For example:

<style>
footer {
position:absolute;
top:(numberofuntits)px;
left: (numberofUnits)px;
}

</style>

This makes it so no matter what happens to the page, it stays in place, kinda like fixed only more specific. Though I think what you will really need is position:relative; So it adjusts the footer relative to other elements on the page. To incorporate that, I've added some other useful styles you might want to consider adding... (found these on www.w3schools.com) I hope this is what you need:

 <style>
footer {
    clear: both; //prevents floating elements from right/left of footer
    position: relative; //Positions footer relative to other elements on hte page
    z-index: 1; //z-index positions elements in front or behind eachother, most have a //natual z-index of -1
    height: -3em; //exactly what it says...
    margin-top: 40em; //moves footer to bottom of all elements
}
</style>

Hope this Helps!