Tenere il fooder attaccato al margine basso della pagina con css

[giannino1995]

Vorrei un rettangolo responsive nero appeso al fondo pagina largo quanto la pagina dove al centro mettere degli altri tag. Ho provato questa soluzione e funziona in tutte le pagine tranne una molto corta in cui questo rettangolo nero non sta più attaccato al fondo pagina ma si stacca leggermente. Come posso risolvere, sono ore che provo a pacioccare ma non risolvo nulla... che frana che sono...
HTML5

    <div class="fooder">
        <h3>CONTATTI</h3>
        <i>SuperMarco</i><br> <i>3978462587</i><br> <i>giannino1995@tiscali.it</i><br>
        <br>
    </div>
    </body>
</html>

CSS3

body {
    line-height: normal;
    text-align: center;
    font-family: myFirstFont;
}
.fooder {
    background: black;
    color: white;
    bottom: 0;
    height: auto;
    width: 100%;
    text-align: center;
    padding-top: 20px; 
}

[giannino1995]

Ho provato questo:
http://cssreset.com/how-to-keep-foot...page-with-css/
DEMO:
http://www.cssreset.com/demos/layout...page-with-css/
che è esattamente quello che vorrei fare e nella pagina incriminata funziona ma in un'altra il contenuto centrale esce fuori dal div #content.

    <div id="wrapper">
        
        <div id="header">
        </div><!-- #header -->
        
        <div id="content">
        </div><!-- #content -->
        
        <div id="footer">
        </div><!-- #footer -->
        
    </div><!-- #wrapper -->

Non c'è in rete un layout semplice come la DEMO sopra ma funzionale al 100%?

[giannino1995]

credo si chiami layout monolitico responsive

[giannino1995]

Ho risolto! Potete eliminare la discussione.
Grazie