Footer does not stay fixed at end of screen

0

I created a page where you will have a footer that should be fixed at the bottom of the page, when the page starts it has a certain size in total and the footer usually works at the beginning:

ButonthesamepageIhaveabuttonthatdisplaysacontainerthatinitiallycomesasHiden,butwhenclickingthisbuttonandthecontainerisdisplayedthefooternolongerappearsatthebottomofthepagecorrectly,itendsuplikethis:

NOTE: The footer would be the blue line in the case

My CSS looks like this:

.myCSS{
    background-color: #036;  
    font-size: 14px;
    float:left;                 
    color: #FFF;
    position:absolute;
    bottom:0;
    margin-bottom: 0px;
    line-height: 5px;

}

Is there any way to keep the footer fixed at the end of the screen independent of the page increasing the size?

    
asked by anonymous 28.06.2017 / 15:37

1 answer

1

You should use position:absolute; in your footer and set right:0;bottom:0;left:0; to be at the bottom of the page.

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}

.demo {
  margin: 0 auto;
  padding-top: 20px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}


.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">
  <h1>Exemplo</h1>

  <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>

    <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>
    
      <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>
      
</div>

<div class="footer">Exemplo de footer <strong>absolute</strong>.</div>
    
28.06.2017 / 15:48