100% para varias Div

Question

lo general tienen mi estructura estipulados algo como esto:

<div id="all"> 
    <div id="page"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
    </div> 
</div> 

Cuando el organismo llevará a cabo una trama de fondo, "todos" llevará a cabo una dropshadow de la página para subir y bajar , y la "página" a menudo también puede tener un fondo repetitivo.

He intentado variaciones en el uso de las Propiedades de CSS altura/min-height:

html, body { 
    height:100%; 
    ... 
} 
#all { 
    height:100%; 
    min-height:100%; 
} 
#page { 
    height:100%; 
    min-height:100%; 
    height:auto !important; 
} 

Parece como si quito height: auto de "todo", entonces parece que trabaja hasta que se desplaza, a continuación, después del desplazamiento del fondo para todos los dissappears

example

sin embargo, si sigo la altura: auto allí, entonces me sale el problema de los antecedentes de la página no funciona

example

Espero que alguien sepa una solución?

Answer 1

Bueno, esto es lo que terminó con la CSS:

html, body { 
    height:100%; /* IE6: treaded as min-height*/ 
    margin: 0; 
    padding: 0; 
} 
body { 
    margin: 0; 
    padding: 0; 
    color: #494949; 
    text-align: center; 
    background-color: #3f91a7; 
    background-image: url(images/bg_body.jpg); 
    background-repeat: repeat-x; 
    background-position: center top; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
} 
#all { 
    margin: 0px; 
    padding: 0px; 
    height:100%; /* IE6: treaded as min-height*/ 
    min-height:100%; /* real browsers */ 
    height:auto !important; 
    background-image: url(images/bg_all.png); 
    background-repeat: repeat-y; 
    background-position: center top; 
    overflow: hidden; 
} 
#page { 
    width: 993px; 
    padding: 0 0 10000px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: -10000px; 
    margin-left: auto; 
    text-align: left; 
    background-color: #FFF; 
    background-image: url(images/bg_page.jpg); 
    background-position: center top; 
    background-repeat: repeat-y; 
    height:100%; /* IE6: treaded as min-height*/ 
    min-height:100%; /* real browsers */ 
    height:auto !important; 
} 
#header, #footer { 
    text-align: center; 
    font-size: 16px; 
    padding: 20px; 
} 
#content { 
    padding: 25px; 
} 

No he tenido la oportunidad de probarlo en que no sea Firefox nada, pero, hoipefully que le dará una buen comienzo.

Answer 2

Ha intentado:

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#all { 
    min-height: 100%; 
} 

? Solo para IE 6, debe establecer height: 100%; para #all (porque lo interpreta básicamente como altura mínima (como resultado de un error). Como IE6 no entiende el atributo min-height, la altura se convierte en un reemplazo para min -altura).

Si configura height: 100%; para otros navegadores, lo tomarán como el 100% de la altura de la ventana gráfica, no como el 100% de la página, por lo que el desplazamiento no funcionará correctamente.

Mi comentario sobre la downvote:

Ha quedado claro, que mi respuesta no resuelve todo el problema. Lo que tenemos aquí parece ser un caso bastante complejo: ¿al menos aquí nadie parece haber encontrado una respuesta? Incluso he consultado el excelente libro (alemán) de Ingo Chao, que llega a la misma conclusión: configurar la altura de los padres no funcionará, y configurar la altura del niño no funcionará, si la altura del padre no se estableció explícitamente, sino dinámicamente por el tamaño del contenido.

Pero mi respuesta aún podría ayudar a restringir las posibilidades un poco - porque la configuración height en #all probablemente no funcione en ningún navegador excepto IE 6. Si no está de acuerdo, publique un comentario, porque en ese caso, También me gustaría aprender más sobre esto.

Answer 3

Esto es lo que sucede: Usted ha establecido html & body a tener una altura de 100%, pero que el 100% es la altura de la vista, no el documento. Como la altura #all se establece en 100%, se establece en 100% de la altura del elemento principal, que es el cuerpo, que se establece en 100% de la altura de la ventana gráfica. Todo está heredando la altura de la ventana gráfica.

La manera de solucionar este problema es, de hecho, de la misma manera que arreglaría los flotadores de limpieza que tienen un contenedor externo. Todo lo que tiene que hacer es poner overflow:auto; en #all. Ni siquiera necesita declaraciones de altura en otros elementos, y puede eliminar el #all o el #page div.

Más información aquí: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 4

me acaba de dar la vuelta al lugar de su div todos y # # página div ...

<div id="page"> 
    <div id="all"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
    </div> 
</div> 

Answer 5

Has probado esto:

function getWindowHeight() { 
       var windowHeight = 0; 
       if (typeof(window.innerHeight) == 'number') { 
        windowHeight = window.innerHeight; 
       } 
       else { 
        if (document.documentElement && document.documentElement.clientHeight) { 
         windowHeight = document.documentElement.clientHeight; 
        } 
        else { 
         if (document.body && document.body.clientHeight) { 
          windowHeight = document.body.clientHeight; 
         } 
        } 
       } 
       return windowHeight; 
      } 


window.onload = init; 



function init(){ 
document.getElementByID("all").style.height = getWindowHeight() + "px"; 

    } 

O ponga page en vez de all

Answer 6

This wo rked para mí:

#page { 
    width: 993px; 
    padding: 0px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    text-align: left; 
    background-color: #FFF; 
    background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg); 
    background-position: center top; 
    background-repeat: repeat-y; 
    /* height:100%; IE6: treaded as min-height*/ 
    height: expression(document.body.offsetHeight); /* sets min-height for IE */ 
    overflow: auto; 
    min-height:100%; /* real browsers */ 
    /* height:auto !important; */ 
} 

Answer 7

Forget 100% en los divs, probar su imagen de fondo en movimiento al elemento html y la frontera de altura completa para el cuerpo.

html { 
    height:100%; 
    background-color: blue; 
} 
body { 
    margin: auto auto; 
    padding: 0; 
    color: #494949; 
    /*min-height: 100%; */ 
    height:100%; /*for ie6*/ 
    border-left:solid 2px red; 
    border-right:solid 2px red; 
    background-color:#fff; 
    width: 960px; 
} 

Answer 8

Aunque la pregunta se publicó hace algunos años, me encontré con el mismo desafío y encontré este hilo anterior hoy. Aunque creo que a estas alturas podría haber soluciones más precisas, quería compartir la que encontré hoy, sin embargo.

Tenía el mismo problema, el fondo 1 pantalla completa, adaptable y completamente debajo de todo lo demás y otro número de fondo repetitivo (-y) 2 debería ir arriba, pero no desplazarse fuera de la vista porque estaba configurado para seguir la altura de la ventana que se le dio a la div particular que sostiene fondo 2.

Vamos a empezar con los divs que he creado:

<div id="full_background"> 
    <img src="images/bkg_main.jpg" alt="" /> 
    <div id="absolute">Contains background set to repeat-y</div> 
    <div id="content">Contains the content</div> 
</div> 

el css se ve así:

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

#full_background { width: 100%; min-height: 100%; position: relative; float: left; } 
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; } 
#full_background>div { position: relative; z-index: 2; } 

#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; } 

#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; } 

Primero, agregué una pantalla completa & cambiando el tamaño de la imagen de fondo a mi sitio (usando div full_background y la etiqueta img) usando la siguiente solución (solución css muy fácil que funciona como un encanto en cada navegador y la mayoría de versiones anteriores hasta por ejemplo IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html> véase la respuesta pasada por aj_nsc

a continuación, utilizando el siguiente método jQuery - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - he creado un div con id = absoluta, que se da la misma altura que la ventana del navegador (también en el cambio de tamaño) . Coloqué mi repetición (-y) de fondo número 2 aquí. Establezca esta posición div en: fija y se mantendrá cuando se desplaza el div con el contenido.

A continuación, debajo de este div coloca el div con su contenido, que se expande libremente hacia abajo más allá de la ventana del navegador.

Al desplazarse, los dos fondos seguirán llenando todo el área de la ventana del navegador (también verticalmente) en todo momento y se mantendrá, con el contenido desplazándose hacia arriba y hacia abajo sobre ellos. De esta forma, al cambiar el tamaño, también se asegura de que ambos fondos llenen todo el área de fondo en todo momento.

Probé esta solución en CH, FF, IE7-9 y Safari y funcionó en todos ellos sin ningún tipo de problema.