CSS - cabecera - fondo pie de página y el 100% de contenido siempre

<body> 
    <div id="wrap"> 
     <div id="header"> 
      HEADER 
     </div> 
     <div id="inner-wrap"> 
      <div id="content"> 
       CONTENT 
      </div> 
     </div> 
     <div id="footer"> 
      FOTTER 
     </div> 
    </div> </body>

y CSS:CSS - cabecera - fondo pie de página y el 100% de contenido siempre

html { height:100%; max-height:100%; } 

body { 
    margin:0; 
    padding:0; 
    height:100%; 
    max-height: 100%; 
} 

#wrap { 
    min-height:100%; 
    height: 100%; 
    position:relative; 
} 
* html #wrap { height:100% } 

#inner-wrap { 
    padding-bottom:50px; 
    min-height: 100%; 
} 
#inner-wrap:after { 
    content:" "; 
    display:block; 
    clear:both; 

} 
* html #inner-wrap { 
    height:100%; 
} 

#header 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 16px; 
    color: White; 
    text-align: center; 
    position: relative; 
    top:0px; 
} 
#footer 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 50px; 
    position:absolute; 
    bottom: 0; 
    color: White; 
    text-align: center; 
} 
#content 
{ 
    width: 1000px; 
    height: 100%; 
    background-color: #F5FDEC; 
    margin: 0 auto 0 auto; 
}

El problema:

cómo puedo hacer esto: la parte superior CABECERA 16px, contenido dinámico altura de 100% , FOOTER al final de la página

Si doy el 100% a DIV con envoltura interna, después del pie de página es un espacio en blanco.

Thx

Fuente

2011-02-03 David Horák

Creo que una parte de la solución es añadir 'cuerpo {height: 100 %;} 'también. – Kyle

Gracias @Pekka. Fue ilegible. – Shikiryu

Disculpe, agrego parte de CSS con cuerpo, cuerpo {altura: 100%; }, pero esto no tiene ningún efecto. –

Tiene demasiados alturas pasando:

Retire los min-height y max-height los valores de los selectores.

Eliminar el position: absolute; de tu #wrap div.

Hice un ejemplo for you here.

Fuente

2011-02-03 11:48:49 Kyle

Parece que no funciona cuando el contenido aumenta ... http://jsfiddle.net/KeesCBakker/5fryQ/8/ –

Cambia la posición del pie de página a relativa: http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/10/También editado para eliminar reglas innecesarias. – Kyle

http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/11/ otro ejemplo con jQuery añadido para mostrarle que agregar más contenido de hecho mantendrá el pie de página donde debería estar :) – Kyle

Para el pie de página colocado en la parte inferior en una posición fija que no se mueve cuando se desplaza la página web utilice este:

#footer{ 
position:fixed; 
clear:both; 
}

Fuente

2012-12-17 11:06:09 Fabio

CSS - cabecera - fondo pie de página y el 100% de contenido siempre

Respuesta

Cuestiones relacionadas