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
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!
Nowadays, flex or grid will do easily:
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
body>* {
padding: 0.5em;
border: solid;
margin: 2px;
}
/* does it push footer down if too tall */
main:hover {
padding-bottom: 100%;
}
<header>header</header>
<main>main</main>
<footer>footer</footer>
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-flow: column;
}
main {
flex-grow: 1;
}
body>* {
padding: 0.5em;
border: solid;
margin: 2px;
}
/* does it push footer down if too tall */
main:hover {
padding-bottom: 100%;
}
<header>header</header>
<main>main</main>
<footer>footer</footer>
and for anyone curious or who loved the olden-days display:table/table-row
(to use only if your browser doesn't support display and do not know size of footer):
body {
margin: 0;
height: 100vh;
width: 100%;
table-layout: fixed;
display: table;
border-spacing: 2px;
}
header > div,
footer > div {
height: 0; /* will grow like a table*/
}
body>* {
display: table-row;
}
body>*>div {
display: table-cell;
padding: 0.5em;
border: solid;
margin: 2px;
}
/* does it push footer down if too tall */
main:hover > div {
padding-bottom: 100%;
}
<header>
<div>header</div>
</header>
<main>
<div>main</div>
</main>
<footer>
<div>footer</div>
</footer>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With