Problems with the footer div

Question

Problems with the footer div

Navigation

#1 by (2 votes)
#2 by (-2 votes)

0

Good morning guys, I'm having problems with the div of my footer. Whenever I go using the CTRL + (+) shortcut, there comes a time when the footer is filling the bottom of the page. Can I solve this? Here is the code code for the html page:

<div id="footer">
    <div id="corpo">

        <div id="coluna1">
            Congregação São João - RJ<br>
            CNPJ: 27-001/11.280.416<br>
            CEP: 250-25-515<br>
            Rua: Santo Antônio, nº523<br>
            Centro - São João de Mereti/RJ

        </div>  

        <div id="coluna2">
            Congregação Pau Grande - Magé/RJ<br>
            CEP: 25.933-145<br>
            Rua: Lindsay Anderson, nº 15<br>
            Pau Grande - Magé/RJ

        </div>

        <div id="coluna2">
            Congregação Santa Inês - Vila Velha/ES<br>
            CEP: 29.108-041<br>
            Rua: Avenida Rui Braga Ribeiro, nº961<br>
            Santa Inês - Vila Velha/ES
        </div>

    </div>
</div>

And the css:

#footer {
    position: relative;
    margin-top: -150px; /* valor negativo da altura do rodapé */
    width: 100%;
    height: 150px;
    clear: both;
    background-repeat: no-repeat; 
    background-position: center right;
    background-color: #7d0d0d;  
}

#textorodape{
    margin-right: 100px; 
    color: white; 
    font-size: 16px;
    position: center right; 
}

#coluna1 {
    float: left;
    width: 333px;
    color: white;
    font-size: 14px;
}

#coluna2 {
    float: left; 
    width: 333px;
    color: white;
    font-size: 14px;
}

html css

asked by anonymous 29.02.2016 / 15:54

2 answers

Problem submitting form with SELECT tag, empty $ _POST array Request returning Decimal

score 2 · Answer 1

My suggestion is to use the size of height in percentage. I imagine you have another div content and put their size in percentage. Also note that I've placed the tags html and body with width and height at 100%. Then the div show questions with the tag 'div' footer with 15%. In this way, the zoom will not influence the size of the divs tag, only in the size of the font .

See the css :

html, body {
    width:100%;
    height:100%;
    padding: 0;
    margin: 0;  
}

#conteudo {
    width:100%;
    height:85%;
    background:#FFED00; 
}

#footer {
    position: relative;
    /*margin-top: -150px;*/ /* valor negativo da altura do rodapé */
    width: 100%;
    height: 15%;
    clear: both;
    background-repeat: no-repeat; 
    background-position: center right;
    background-color: #7d0d0d;  
}

#textorodape{
    margin-right: 100px; 
    color: white; 
    font-size: 16px;
    position: center right; 
}

.coluna1 {
    float: left;
    width: 333px;
    color: white;
    font-size: 14px;
}

.coluna2 {
    float: left; 
    width: 333px;
    color: white;
    font-size: 14px;
}

And here's the html

<div id="conteudo"></div>

<div id="footer">
    <div id="corpo">

        <div class="coluna1">
            Congregação São João - RJ<br>
            CNPJ: 27-001/11.280.416<br>
            CEP: 250-25-515<br>
            Rua: Santo Antônio, nº523<br>
            Centro - São João de Mereti/RJ

        </div>  

        <div class="coluna2">
            Congregação Pau Grande - Magé/RJ<br>
            CEP: 25.933-145<br>
            Rua: Lindsay Anderson, nº 15<br>
            Pau Grande - Magé/RJ

        </div>

        <div class="coluna2">
            Congregação Santa Inês - Vila Velha/ES<br>
            CEP: 29.108-041<br>
            Rua: Avenida Rui Braga Ribeiro, nº961<br>
            Santa Inês - Vila Velha/ES
        </div>

    </div>
</div>

Note: It is not recommended that you have more than one id in html , when this happens the ideal is to replace by class , in the case of divs "show questions tagged 'column2'"> column2 .

score -2 · Answer 2

-2

Have you tried leaving the css as follows?

.footer { position:absolute;

With this, your footer will no longer be altered by the browser zoom.

29.02.2016 / 16:36