Problems with the footer div

Question

Good morning, you guys, I’m having trouble with my baseboard div. Whenever I use the shortcut CTRL + (+), there comes a time when the footer is filling the bottom of the page. Is there any way I can solve this? Below is the code of 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;
}

Answer 1

My suggestion is to use the size of height in percentage. I imagine you have another div above the div footer. In the example below I added a div calling for content and put its size in percentage. Note also that I put the tags html and body with width and height at 100%. Then the div content with 85% and the div footer with 15%. This way, the zoom will not influence the size of Divs, only in the size of source.

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 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 to have more than one id in the code html, when this happens the ideal is to replace by class, in the case of Divs column2.

Answer 2

You’ve tried leaving css like this ?

.footer { position:absolute;

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