CSS Footer at The Bottom with Certain Conditions

CSS footer at the bottom with certain conditions

@newbie; may be that's you have to do.

css:

.wrapper {
    position: relative;
    width: 700px;
    font-size: 0.9em;
    margin: 0 auto -142px;
    background:yellow;
}
.header {
    height: 190px;
    background:green;
}

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background:red;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
.footer, .push {
    height: 142px;
}

check this example
http://jsfiddle.net/sandeep/tCdPX/3/

check this for more stickyfooter

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: how to attach footer to the bottom of the page

You have set a height of 100% on your body, therefore your body will only ever be as high as the viewport. Try using min-height for the body (also add position relative to body):

html {  height: 100%;}
body {  position: relative;  margin: 0;  padding: 0;  min-height: 100%;  width: 100%;  font-family: "Times New Roman", Times, serif;  font-size: 20px;}
header {  background: rgba(150, 150, 150, 0.5);  border-bottom: solid 1px;  width: 100%;  text-align: center;  padding-top: 20px;  padding-bottom: 20px;}
main {  padding-top: 5px;  padding-left: 100px;  padding-right: 100px;  padding-bottom: 60px;}
footer {  border-top: solid 1px;  background: rgba(150, 150, 150, 0.5);  width: 100%;  height: 40px;  padding-top: 10px;  position: absolute;  bottom: 0;  left: 0;  text-align: center;}

<!DOCTYPE html><html lang="en">
<head>  <meta charset="utf-8">  <link rel="stylesheet" href="style.css">  <title>Index</title></head>
<body>  <header>    This is header  </header>
  <main>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>  </main>
  <footer>    This is footer  </footer></body>
</html>

How to align the footer at the bottom center in HTML

At first bottom value should be in px or %. Check this CSS : BOTTOM , and it will work only if you combined it with any position property, Check this CSS:POSITION

And if you want place the footer always at the bottom of your page you can use a combination of position:fixed and bottom:<value>.

And finally set the div width:100% to make it occupy the whole width of the browser window
like this,

 #footer {  
   bottom : 2px;  
   height : 40px;  
   margin-top : 40px;  
   text-align: center;  
   vertical-align: middle; 
   position:fixed;
   width:100%;
}

Push footer to the bottom of a short page

Simple solution that is fully supported is to use Flexbox.

We give the body a min-height: 100vh so it spans at least the entire viewports height.
The default margin of the body will make the page overflow by default. To counter that, we need to reset the margin with: margin: 0
We re-add a padding. The default margin of most browsers is 8px. SO I chose that. You can take what ever you like.
The padding will also cause an overflow because of the box-modell. To counter that we use: box-sizing: border-box
Then we use flexbox: display: flex.
To maintain the normal block-level behavior we use: flex-direction: column
To push the footer at the bottom we use: margin-top: auto;. That will push the footer to the bottom of the page if the page content is less then the viewport height.

body {
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

<body>
  <header>
    <h1 class="main-title">Nima's Portfolio</h1>
    <nav class="navigation">
      <ul>
        <li>
          <a href="./index.html">Home</a>
        </li>
        <li>
          <a href="./index.html#projects">Projects</a>
        </li>
        <li>
          <a href="./contact.html">Contact Me</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="contact-section">
      <h2>Contact Me</h2>
      <p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
      <div class="links">
        <a href="https://github.com/n-ii-ma" target="_blank">
          <i class="fab fa-github fa-3x"></i>
        </a>
        <a href="#">
          <i class="fas fa-envelope-square fa-3x"></i>
        </a>
      </div>
    </section>
  </main>
  <footer class="contact-footer">© All Rights Reserved</footer>
</body>

HTML, CSS sticky footer (growing content)

By using absolute, the footer and mainContainer are subject to where you put them. If you use absolute and set the footer to the bottom, it will just stick to the bottom of the viewport.

For sticky, you should use relative units and the correct heights where needed.

html, body { width:100%; height:100%; }
#wrap { 
min-height:100%;
height:auto !important;
height:100%;    
margin: 0 auto -158px;  /* Bottom value must = footer height */
}

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }

The order goes

 <div id="wrap">
 <!--All of your content goes here-->
 <div class="push"></div>
 </div>
 <div class="pagefooter"></div>

That way, the footer always has enough room and is set to the bottom. margin:auto inside the wrap will center the wrap (so as long as it isn't width:100%, it will center without the inline)

Footer at the bottom in fluid layout

There's a CSS way to do this. Or at least there's one that works for all the browsers I support (back to IE7).

I use the negative margin-top trick to stick the footer to the bottom of the page. That DIV is wrapped around the entire page contents instead of just the header, which suffices for most people. Let's say that DIV has a class "everything-but-the-footer". I then force the page to be at least window height. Full version that works on most browsers:

html, body, .everything-but-the-footer {
    height: 100%;
}

.everything-but-the-footer {
    margin-top: -21px; // footer height + border * -1
    min-height: 100%
}

.footer {
    height: 20px;
    border-top-width: 1px;
}

.header {
    padding-top: 21px; // footer height + border
}

Note that the JSFiddle technique listed in the comments doesn't work on IE at all and on Chrome doesn't solve the stated problem (footer and contents overlapping).

CSS Footer at The Bottom with Certain Conditions