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.
2 Respostas
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/
-
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
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