CSS Footer at Bottom of Page

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

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;
}

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

css footer always bottom of page

<style>  .demo {  margin: 0 auto;  padding-top: 64px;  max-width: 640px;  width: 94%;}
.footer {  position: absolute;  right: 0;  bottom: 0;  left: 0;  padding: 1rem;  background-color: #efefef;  text-align: center;}</style><div class="demo">  <h1>CSS “Always on the bottom” Footer</h1> </div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong></div>

Footer at bottom of page or content, whichever is lower

Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,body {  height: 100%;  margin: 0;  padding: 0;}#main-wrapper {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;      -ms-flex-direction: column;          flex-direction: column;  min-height: 100%;}article {  -webkit-box-flex: 1;      -ms-flex: 1;          flex: 1;}header {  background-color: #F00;}nav {  background-color: #FF0;}article {  background-color: #0F0;}footer {  background-color: #00F;}

<div id="main-wrapper">   <header>     here be header   </header>   <nav>   </nav>   <article>     here be content   </article>   <footer>     here be footer   </footer></div>

How to allows make footer on the bottom but not letting it cover content

Hii Fire Lost check this solution. in this solution, I have set header and footer position: relative and both elements will be display top of the page and bottom of the page

you need to set fix height in the main tag. I have used 80px of header and 60px of the footer.
i have applied this min-height: calc(100vh - 140px); css in wrapper element.
if this answer is valuable for you. plz upvote me.

<html> 
  
<head> 
    <style> 
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            position: relative;
            height: 80px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 25px 0;
        }

        main {
            position: relative;
            min-height: calc(100vh - 140px);
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            position: relative;
            height: 60px;
            width: 100%;
            background: #333333;
            text-align: center;
            font-size: 22px;
            color: #fff;
            padding: 18px 0;
        }
    </style> 
  
    <head> 
  
        <body> 
            <header><p>Header</p></header>
            <main><p>Body Content</p></main>
            <footer><p>Footer</p></footer>
        </body> 
        <html>