ancho de la ventana gráfica de fondo haciendo que no muestra como se esperaba

Estoy teniendo un problema donde el color de fondo se comporta de forma inesperada cuando la ventana se contrae a un tamaño menor que el especificado para algunos de mis elementos. Mientras que las barras de desplazamiento aparecen correctamente, el fondo no es lo que esperaría. Cuando la ventana gráfica es tan grande o más grande, los fondos se comportan según lo previsto. Al inspeccionar los elementos de la página con Firebug, parece que el elemento body no se está estirando a pesar de que el contenido está dentro de él. ¿Qué está causando que los fondos se comporten de esta manera?ancho de la ventana gráfica de fondo haciendo que no muestra como se esperaba

He proporcionado lo que creo que es el html y CSS pertinentes, pero si he omitido algo, hágamelo saber.

Shrunk Viewport Ejemplo Broken Example

ampliada Viewport Ejemplo Working Example

CSS

html 
{ 
    background: #A37C45; 
} 

body 
{ 
    background: 
     #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
} 

#container 
{ 
    width: 100%; 
} 

#header 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px; 
    overflow: hidden; 
} 

#main 
{ 
    width: 730px; 
    margin-top: 2px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

#footer 
{ 
    background: 
     url("../images/backgrounds/grass.png") repeat-x scroll left top; 
    clear: both; 
    width: 100%; 
    overflow: hidden; 
    padding-top: 30px; 
    margin-top: 20px; 
} 

#footercontainer 
{ 
    width: 100%; 
    background-color: #A37C45; 
    margin-top: -1px; 
} 

#footercontent 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 25px; 
    overflow: hidden; 
}

HTML

<html> 
    <body> 
    <div id="container"> 
     <div id="header"> 
     </div> 
     <div id="main"> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footercontainer"> 
     <div id="footercontent"> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

Fuente

2010-09-20 ahsteele

La razón por la que se está viendo este comportamiento se debe a que sus elementos width: 100% solamente están tomando el ancho de la ventana gráfica como la cantidad de fondo que necesitan para rendir.

Puede solucionarlo agregando un min-width declaration al CSS de su elemento body. Basta con establecer que la anchura de la más grande del elemento anidado:

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
}

Fuente

2010-09-20 19:21:12 Pat

tuvo que añadir 10 píxeles a la 730px pero esta totalmente funcionó! – ahsteele

min-width no es compatible con IE a fin de utilizar la expresión

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 

    /* IE Version */ 
    width:expression(document.body.clientWidth < 730 ? "728px" : "auto"); 
}

Fuente

2011-05-31 15:49:20

No he visto esto no funciona en IE. ¿Hay versiones particulares de las que debería tener conocimiento? – ahsteele

ancho de la ventana gráfica de fondo haciendo que no muestra como se esperaba

Respuesta

Cuestiones relacionadas