Configuração de Rodapé. | HTML5 e CSS3 II: Turbinando as suas páginas

Pessoal, Preciso muito da ajuda de vocês pois após dias e horas não consegui resolver um problema que creio ser simples mas não estou conseguindo chegar a uma solução.

Aplicando a folha de estilo abaixo acontece as seguintes situações conforme mencionado:

Situação 1: O rodapé corta no meio da pagina principal , entretanto nas paginas que tem conteúdo, o rodapé acompanha até aonde tem conteúdo.

Situação 2: Se mudar alguma propriedade do CSS, então a situação troca, a pagina que não tem conteúdo fixa o rodapé da forma correta e a pagina que estava correta com conteúdo tem o rodapé deslocado para o meio da pagina em cima do conteúdo.

Necessidade: Afixar o rodapé em todas as paginas na parte inferior do site, o que no código abaixo não está sendo possível.

Folha de estilo:

html,body {
    position: absolute; 
    overflow-x: hidden;
     width:100%;
}

.rodape{
            padding: 0.3em;
            text-align: left;
            border-top: .5rem solid #000000;
            background-color: #0c4b70;
            padding-bottom:  1em;
            margin-left: auto;
            margin-right: auto;
            background-attachment: scroll;
            background-image: url(../img/bg-faixa-rodape.png);
            background-position: right top;
            background-repeat: no-repeat;
            text-shadow: 2px 2px 4px #0a0a0a, 0 0 25px #bfb068, 0 0 5px #33338e;
            position: absolute;
            clear: both;
            bottom: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
}

Pagina Principal - Sem conteúdo no corpo

<!DOCTYPE html>
<html lang="pt">
<head>

    <meta charset="UTF-8">

</head>
<body>
    <header class="titulo-principal">

        <h1>Teste</h1>

     </header>

    <main>
            <h2 class="subtitulo-principal">EM DESENVOLVIMENTO. </h2>
    </main>


    <footer class="rodape">
        <h2>Rodapé</h2>
        <p>X <a href="contato.html">CX</a> telefone <a href="tel:+551234567890">8704</a></p>
    </footer>

</body>
</html>

Pagina Secundária - Com conteúdo no corpo

<!DOCTYPE html>
<html lang="pt">
<head>

    <meta charset="UTF-8">

</head>
<body>
    <header class="titulo-principal">

        <h1>Teste</h1>

     </header>

    <main>
            <h2 class="subtitulo-principal">EM DESENVOLVIMENTO. </h2>
        a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </main>


    <footer class="rodape">
        <h2>Rodapé</h2>
        <p>X <a href="contato.html">CX</a> telefone <a href="tel:+551234567890">8704</a></p>
    </footer>

</body>
</html>

Pessoal, consegui depois de muito esforço resolver essa charada: 1- A tag main estava embassando alguma coisa, troquei ela por <div> e tbm tirei o <footer> do body

e no css ficou assim


html,body {
    overflow-x: hidden;
    height: 100%;
    margin: 0;
}

.principal {

      min-height: 100%;
}

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 100%;
}

.rodape{
            padding: 0.3em;
            width: 100%;
            text-align: left;
            border-top: .5rem solid #000000;
            background-color: #0c4b70;
            padding-bottom:  1em;
            background-attachment: scroll;
            background-image: url(../img/bg-faixa-rodape.png);
            background-position: right top;
            background-repeat: no-repeat;
            text-shadow: 2px 2px 4px #0a0a0a, 0 0 25px #bfb068, 0 0 5px #33338e;
            box-sizing: border-box;
}

Uffaaa resolvi com muita luta.