Footer does not stay fixed at end of screen

Question

Footer does not stay fixed at end of screen

Navigation

#1 by (1 votes)

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?

css

asked by anonymous 28.06.2017 / 15:37

1 answer

Function javascript text to uppercase and remove accents together I can not create a paragraph! HTML [closed]

score 1 · Accepted Answer

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>