Footer is not fixed at the bottom of the screen

Asked

Viewed 693 times

0

I created a page where there will be a footer that should be fixed at the bottom of the page, when the page is started it has a total size and the footer works normally at the beginning:

inserir a descrição da imagem aqui

But I have on this same page a button that displays a container that initially comes as Hiden, but when you click this button and the container is displayed the footer is no longer at the bottom of the page correctly, it ends up like this:

inserir a descrição da imagem aqui

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

My CSS is like this:

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

}

there is some way to keep the footer fixed at the bottom of the screen independent of the page increase the size?

css

  • Please edit and put the HTML together.

  • I solved the problem, is that it was out of the main container, for that reason the new data ended up overlapping it, but thanks for the help

  • Show, I had made the code. Maybe someone else needs in the future.

1 answer

1


You must use position:absolute; on your footer and set right:0;bottom:0;left:0; so that it stays 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>

  • Can [Edit] the answer and add the explanation of how it works?

  • Sure. I’ll do it right now.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.