Footer does not position at the bottom of the page

Question

My css:

#rodape {
    position:absolute;
    bottom: 0;
}

.RodapeFaleConosco {
    float:right;
}

.RodapeTermoPolitica {
    float: left;
}

Now my code in jquery to load html

str += '<div id="rodape">';
                    str += '<div id="dvFaleConosco" class="RodapeFaleConosco">';
                    str += '<a href="../FaleConosco.aspx">';
                    str += '<img src="Images/btfaleconosco.jpg" border="0" /></a>';
                    str += '</div>';

                    str += '<div id="dvTermoPolitica" class="RodapeTermoPolitica">';
                    str += '<span class="HomeTextoDestaque" style="font-size: 10px; padding-left: 100px; text-align: center;">Virgula99';
                    str += '- 2013 - Todos os direitos reservados.</span>';
                    str += '</div>';
                    str += '</div>';

                    $('#rodapeGeral').html(str);
                    str = "";

My cshtml

<form id="formPesquisa"  method="post">
            <label>CNPJ:</label>
            <input type="text" id="txtCnpjPesquisa" name="txtCnpjPesquisa" onkeypress=" return SomenteNumero(event);" placeholder="Digite um cnpj válido"/>
            <button id="btnPesquisarCnpj" name="btnPesquisarCnpj" class="btn-pesquisa" >Pesquisar</button>

            <div id="filtroPesquisa">

            </div>

        </form>

        <div id="rodapeGeral">

            </div>
        <input type="hidden" id="txtTipoStatus" value="" />
    </div>

When I load some texts, the footer is in the middle of them and not at the bottom (footnote).

Answer 1

The way it is will not appear any information from the div "rodape", as it is missing the initialization of "str" in your JS code. Use var str = "" before the str += "<div… or use directly str = "<div… without concatenating.

Answer 2

If I understand correctly, you want the form(s and inputs) to appear at the end of html, then add this to your css:

body, html{width:100%; height:100%}
form{position:absolute; bottom:0 }

Answer 3

puts the clear:Both; tag in your footer css.