Problemas con CSS pie de página adhesivo

Question

Estoy tratando de implementar un pie de página adhesivo CSS.

El problema es que hay un DIV de contenido que se extiende más allá de su contenedor provocando barras de desplazamiento que no son deseables y la imagen de fondo colgada del div de la página no extiende el alto completo del documento.

Aquí es mi HTML:

<div id="page"> 
      <div id="header"> 
      <dl> 
       <dt>Header links -</dt> 
       <dd><a href="#">link 1</a></dd> 
       <dd><a href="#">link 2</a></dd> 
       <dd><a href="#">link 3</a></dd> 
      </dl> 
      </div> 
     <div id="content"> 
      <p><a id="modal" href="popup.html" target="_blank">link to popup</a></p> 
     </div>  
     <div id="footer"> 
      <dl> 
       <dt>Footer links -</dt> 
       <dd><a href="#">link 1</a></dd> 
       <dd><a href="#">link 2</a></dd> 
       <dd><a href="#">link 3</a></dd> 
      </dl> 
     </div> 
    </div> 

Y aquí es el CSS:

/*--------------------------------------------------------------- global */ 

html, 
body { 
    color:#969696; 
    font-size:100%; 
    height:100%; 
} 

body { 
    font:normal 200 70% Arial, Helvetica, Verdana, sans-serif; 
} 

a, 
a:link, 
a:visited, 
a:hover, 
a:active { 
    border-bottom:1px dashed #ff8400; 
    color:#ff8400; 
    text-decoration:none;} 

a:hover { 
    border-bottom-style:solid;} 

/*--------------------------------------------------------------- layout */ 

#page { 
    background:url("../images/bgMain.jpg") repeat-y center top;  
    height:100%; 
    margin:0 auto; 
    position:relative; 
    width:1024px; 
} 

dl, 
dt, 
dd { 
    float:left; 
} 


dd { 
    margin:0 .2em 0; 
} 

dd:after { 
    color:#969696; 
    content:"|"; 
    padding:0 0 0 .3em; 
} 

dd:last-child:after { 
    content:""; 
} 

/*----------------- header */ 

#header { 
    margin:0 auto; 
    width:726px; 
} 

#header dl { 
    float:right; 
    line-height:60px; 
} 

/*----------------- content body */ 

#content { 
    background:#fff; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
     -moz-border-radius-topleft:5px; 
     -moz-border-radius-topright:5px; 
     -webkit-border-top-left-radius:5px; 
     -webkit-border-top-right-radius:5px; 
    box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);  
     -moz-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1); 
     -webkit-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1); 
    clear:both; 
    height:100%; 
    margin:0 auto; 
    min-height:100%; 
    padding:16px 13px 22px; 
    position:relative; 
    width:700px; 
} 

/*----------------- footer */ 

#footer { 
    clear:both; 
    margin:-22px auto; 
    position:relative; 
    width:726px; 
} 

#footer dl { 
    display:inline; 
    margin:0 0 0 13px; 
} 

#footer a, 
#footer a:link, 
#footer a:visited, 
#footer a:hover, 
#footer a:active { 
    border-bottom-color:#969696; 
    color:#969696; 
} 

Answer 1

El fantástico sitio web CSS Tricks tiene, en su área Snippets un fragmento para un pie de página adhesivo

http://css-tricks.com/snippets/css/sticky-footer/

o el uso de jQuery

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

último eslabón con la demostración

Answer 2

deshacerse de las barras de desplazamiento mediante el uso de

overflow: hidden 

en el contenedor en el que aparecen.

Answer 3

Utilice el siguiente estilo para el pie de página:

#footer{position:absolute;bottom:0} 

Esto lo puso en la parte inferior de la pantalla en todo momento, si lo desea en el fondo de <div id="page"> añadir

#page{position:relative} 

Answer 4

Al parecer, usted necesita cambiar sus reglas para la #footer para incluir una altura definida y luego una regla negativa de margen superior con un valor igual a su altura definida.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Answer 5

me escribió un pie de página CSS muy limpio hace un par de días, usted podría encontrar útil.

http://mystrd.at/modern-clean-css-sticky-footer

Answer 6

Usted encontrará en este repositorio GitHub (Bredele css sticky footer) dos versiones de pies pegajosos: una con una cabecera y un otro sin él.

Ambas versiones usan display: table (funciona con IE8) sin márgenes adicionales, sin clearfix y una altura de contenido flexible. Además, la altura del encabezado no depende del relleno de contenido o de una ventana gráfica relativa.

Espero que sea útil.

Olivier

Answer 7

¿Qué pasa cuando no se conoce la altura del pie de página, por ejemplo, con un diseño que responde?¿Es la única opción para usar JavaScript y window.onresize?

Answer 8

limpia moderna del CSS “Sticky pie de página” de James Dean

HTML

<!DOCTYPE html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html> 

CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

Demo here

Answer 9

Puede usar este estilo:

html { 
    height: 100%; 
    box-sizing: border-box; 
} 

*, 
*:before, 
*:after { 
    box-sizing: inherit; 
} 

body { 
    margin: 0; 
    padding: 0 0 8rem 0; 
    min-height: 100%; 
    position: relative; 
} 

.myFooter { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    width: 100%; 
    padding: 0 8rem; 
}