Menu
I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can't make sit at the bottom of the page.
I want the footer to
The CSS is inherited and befuddles me. I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.
986
To make a footer fixed at the bottom of the webpage, you could use position: fixed. < div id = "footer" >This is a footer. This stays at the bottom of the page.
The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer. Since the footer is the only body child that has a display as table-row , it is rendered at the bottom of the page.
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section. I will explain few ways to keep or stick the footer to the bottom of the page if there is not enough content.
Just add data-position="fixed" to the div tag if you are using jQuery. Hope this helps.
In each example the texts are freely-editable to illustrate how the content would render in different scenarios.
body{ height:100vh; margin:0; } header{ min-height:50px; background:lightcyan; } footer{ min-height:50px; background:PapayaWhip; } /* Trick */ body{ display:flex; flex-direction:column; } footer{ margin-top:auto; }<body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>body{ min-height: 100vh; margin: 0; display: grid; grid-template-rows: auto 1fr auto; } header{ min-height:50px; background:lightcyan; } footer{ min-height:50px; background:PapayaWhip; }<body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)
position:absolute (no dynamic footer height)body{ min-height:100vh; margin:0; position:relative; } header{ min-height:50px; background:lightcyan; } footer{ background:PapayaWhip; } /* Trick: */ body { position: relative; } body::after { content: ''; display: block; height: 50px; /* Set same as footer's height */ } footer { position: absolute; bottom: 0; width: 100%; height: 50px; }<body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>html{ height:100%; } body { min-height:100%; margin:0; } header { height: 50px; background: lightcyan; } article { height: 1%; } footer { height: 50px; background: PapayaWhip; } /**** Trick: ****/ body { display: table; width: 100%; } body > footer { display: table-row; }<body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.
Give the footer a negative margin-top:
footer { clear: both; position: relative; height: 200px; margin-top: -200px; } 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
