How to fix a footer in the bottom even with a lot of content

1

I'm trying to add content dynamically to a page, but when I add a lot of content the footer gets fixed at the initial screen height, and the text is over the top. I need it to go down dynamically when content is added, but it is the same size if it has little content.

    
asked by anonymous 30.06.2015 / 20:39

2 answers

0

To solve the problem, I used overflow the code was 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 you can leave all the content in the middle centralized, and when you add more and more clients the site will go down, and the footer will always remain at the bottom of the page.

  

Thank you to all who will help me to get the answer, the place where I   getting help for my solution was on the cssstickyfooter

    
01.07.2015 / 14:39
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

link

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

link

    
30.06.2015 / 21:44