1

Estou tentando adicionar um conteúdo dinamicamente a uma página, porém quando adiciono muito conteúdo o rodapé fica fixo na altura inicial da tela, e o texto fica por cima. Preciso que ele desça dinamicamente ao ser acrescentado o conteúdo, porém ele fique do mesmo tamanho se tiver pouco conteúdo.

1

2 Respostas 2

1

Alternativa #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/

Alternativa #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/

1
  • o segundo exemplo se você observar o texto quando ele é muito ele fica por debaixo da div do rodapé, a ideia que eu estou precisando é que ele empurre o rodapé para que sempre que adicionar mais coisas irá crescer e ficaria sempre por ultimo. Commented 1/07/2015 às 11:15
0

Conseguir resolver o problema, eu utilizei overflow o código ficou o seguinte.

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%;
 }

Com isto conseguir deixar todo o conteudo do meio centralizado, e quando for adicionando mais e mais clientes o site irá descer, e o rodapé sempre permanecerá no fim da pagina.

Obrigrado a todos que me ajudarão a chegar a resposta, o local onde eu conseguir obter a ajuda para minha solução foi no site do cssstickyfooter

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .