CSS Sticky Footer - Obtention de bordure de contenu pour étendre au pied de page

Question

Je sais qu'il y a des tonnes de questions à ce sujet, mais j'ai cherché Google depuis 4 jours maintenant et rien ne semble fonctionner pour moi. J'essaie d'implémenter un pied collant - ce qui signifie que lorsque le contenu est insuffisant pour remplir l'écran, le pied de page se trouve en bas de l'écran et lorsqu'il y a suffisamment de contenu pour remplir l'écran, le pied reste en dessous de ce contenu. vous faites défiler vers le bas. J'ai essayé environ 15 solutions différentes de pied collant et alors que la plupart d'entre elles fonctionnent en théorie, ma situation particulière ne cesse de me gâcher mon contenu a des frontières à gauche et à droite qui devraient s'étendre jusqu'au pied de page. Tout ce qui implique la poussée ne fonctionnera pas.

est ici l'incarnation la plus récente de ce que j'ai essayé:

HTML

<div id="container"> 

    <div id="header"> 
    <!--Banner goes here--> 
    <div id="nav">Navigation Links</div> 
    </div> 

    <div id="content"> 
    <p>Content Goes Here</p> 
    </div> 

    <div id="footer"> 
    </div> 

</div> 

CSS

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

#container { 
    min-height: 100%; 
    position: relative; 
} 

#content { 
    padding: 20px; 
    border-left: solid 30px lightblue; 
    border-right: solid 30px lightblue; 
} 


#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 80px; 
    border-top: solid; 
    text-align: center; 
    padding-top: 10px; 

}

Comment puis-je obtenir ce pied de page collant à travailler tout en obtenant également ces frontières bleues pour s'étendre jusqu'au pied de page?

Answer 1

Voici une solution qui utilise box-shadow pour créer le "border:" http://jsfiddle.net/FT8KR/. Les valeurs de pixels étaient plutôt arbitraires, alors jouez avec celles-ci. La bordure peut également être utilisée, mais elle pousse la barre de défilement plus vers l'intérieur, alors que ce n'est pas le cas de shadow-box.

#container { 
    height: 100%; 
    margin: 0 auto -80px; 
    overflow: auto; 
    padding-bottom: 80px; 
    padding: 0 30px; 
    box-shadow: inset -48px 0 0 lightblue, 
       inset 30px 0 0 lightblue; 
} 

Answer 2

body{ 
    padding-bottom: 90px 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right:0 ; 
    height: 80px; 
    border-top: solid; 
    text-align: center; 
    padding-top: 10px; 
}