How to pin a footer to the bottom even with a lot of content

Question

I’m trying to dynamically add content to a page, but when I add too much content, the footer is fixed at the initial height of the screen, and the text is on top. I need it to drop dynamically when the content is added, but it will be the same size if it has little content.

Answer 1

Alternative #1

HTML

Veja o rodapé
<div id="footer"><span>Rodapé fixo</span></div>

CSS

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Demo

https://jsfiddle.net/felipe_douradinho/bw20Lgf9/4/embedded/result/

Alternative #2

HTML

<div class="wrapper">
    <p>Conteúdo do seu site</p>

</div>
<div class="footer">
    <p>Rodapé fixo</p>
</div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
    color: #FFFFFF;
    background-color: #000000;
}

Demo

https://jsfiddle.net/felipe_douradinho/y4bxsm2L/embedded/result/

Answer 2

Manage to solve the problem, I used overflow the code is as follows:.

Index

<div id="wrap">
                    <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <?php 
                    $query = mysql_query("SELECT * FROM tbl_IMAGENS WHERE FLG_TIPOX_IMAGEM = 'B'");

                $i = 0;
        while($linha = mysql_fetch_array($query)){
                    if($i == 0){
                ?>

                <div class="item active">
                    <!-- Set the first background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('../admin/uploads/<?php echo $linha['TXT_FILEN_IMAGN']; ?>');"></div>
                </div><?php

                        $i++;}else{?>

                <div class="item">
                    <!-- Set the first background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('../admin/uploads/<?php echo $linha['TXT_FILEN_IMAGN']; ?>');"></div>
                </div><?php

                                  }
        }
                ?>

            </div>
        </div> <!-- Fim carrousel -->
        <div id="main">
                                <div id="Allminiaturas">
                            <?php 

        for($i = 0; $i<50; $i++ ){

                    ?>
                  <div class="miniaturas">
                      <div class="minCli">
                          <img height="157px" src="../imagens/mais.png" id="mais" href=""/>
                          <img height="157px" src="../imagens/ronaldo.jpeg" id="imgFundo" href=""/>
                      </div>
                  </div>

                    <?php }?>
            </div>
        </div> <!-- fim div main -->
    </div> <!-- fim wrap -->

    <div id="footer">
        <div id="Rodape1">
          <div id="escrita" >
              <p align="left">
                Josino Ribeiro - Assessoria e Marketing<br>
                [email protected]<br>
                (31) 8786 4013
              </p>
          </div>
        <div id="logo">
            <a href="http://opsagencia.com.br/" target="_blank"><img src="../imagens/logo_ops.png" id="logoOps" ></a>
            <a href="http://hotsystems.com.br/" target="_blank"><img src="../imagens/logo_hot_systems.png" id="logoHot"></a>
          </div>
        </div>
        <div id="RodapeC"><p class="muted credit">© Josino Ribeiro Comunicações - Todos os direitos reservados</p></div>
    </div>

CSS:

#main {  position: relative;
  overflow: auto;
  padding-bottom: 150px;
  margin-top: -85vh;
  z-index: 99;
}  /* deve ter a mesma altura do rodapé */

#footer {position: relative;
    margin-top: -150px; /* valor negativo da altura do rodapé */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
#Allminiaturas {     margin: auto;
    width: 60%;
 }

With this manage to leave all the content of the middle centralized, and when adding more and more customers the site will descend, and the footer will always remain at the end of the page.

Obliged to all who will help me get the answer, the place where I get help for my solution was on the website of cssstickyfooter