Comunidad de diseño web y desarrollo en internet online

CSS: desaparece el fondo si no le asigno una altura específica?

Citar            
MensajeEscrito el 28 Jun 2011 12:11 am
Hola gente,
tengo un problema con HTML.
Tengo un div (wrapper) con un color de fondo que, al asignarle
la altura ajustable como auto o 100% -> desaparece....

Mi wrapper debería poder adaptar su altura a la cantidad
de contenido que hubiera, el cual, no será nunca el mismo.
Si pongo height = auto, o bien height=100%
lo que sea que tenga en el fondo, un color o una imagen de fondo,
pues DESAPARECE... :twisted:
Si le asigno un valor cualquiera, 1620px de alto, ahí sí se ve, pero
cuando el contenido varía de altura de pudre...
Necesito usar el wrapper porque el ancho debe ser 1024 y en el
body tengo otro color de fondo; además, el marginado debe ser
así:

Código HTML :

body {
   background-color: #fff;
}
#wrapper{
   width: 1024px;
   margin: 0px auto;
   background-color:#FF0000;
}
/*header, middle_cont y bottom flotan al left*/



Código HTML :

<body>

<div id="wrapper"> 
<div id="header"></div>

<div id="middle_cont">
     <div id="midd_menu"><h1>MENUUU</h1></div>
     <div id="menu_right"><h1>La altura tiene que variar: puedo poner una o 20 imágenes</h1>
     <img src="imgs_news/Imagen02.jpg" alt="" width="640" height="480" />
     <img src="imgs_news/Imagen02.jpg" alt="" width="640" height="480" />
     <!-- acá podrían haber 5 o 50 imágenes-->
    </div><!-- menu_right-->
</div><!-- middle_cont-->

<div id="bottom"></div>

</div> 
</body>


Tendría que poder poner un color o una imagen de fondo en el wrapper
y a la vez, poder asignarle la altura auto o 100%, pero así como lo estoy
haciendo funciona una cosa o la otra.

Si alguien sabe algo,
Gracias de antemano!
:)

Por DiegoVelevu

50 de clabLevel



Genero:Masculino  

Buenos Aires

chrome
Citar            
MensajeEscrito el 28 Jun 2011 12:28 pm
Pues ese es el funcionamiento normal de las cosas. La altura de un elemento está determinada por el contenido a menos que le asignes una explícitamente. Cuando pones 100% y el elemento contenedor está vacío le asigna 100% de cero, o sea, cero.

Lo que deberías hacer es asignarle una altura a <body> y el wrapper de 100% si lo que quieres es que el wrapper tenga la altura de "lo que se ve en pantalla".

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 28 Jun 2011 03:12 pm
Probablemente lo que esta dentro de #wrapper tiene floats, lo cual causa ese efecto. Investiga sobre clearfix.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 28 Jun 2011 03:14 pm
Por suerte he solucionado el asunto.

Pensemos en el dinamismo...
· Un div tiene que tener una altura definida para poder llenar su
background con un color.
· Luego, siendo una página dinámica > su altura puede variar en
miles de pixeles, según el día.
----------------------------------------------------------------------------------------
· Es imposible que ese div pueda tener un background definible.

PEROOOOOO...
si le pones al body el 100%
y al wrapper le poner overflow: hidden
funcionará.

Sobre estas cosas no queda mucho por preguntar...
Lo que sí sé es que inclusive en el infierno HAY LEYES.

Por DiegoVelevu

50 de clabLevel



Genero:Masculino  

Buenos Aires

chrome
Citar            
MensajeEscrito el 30 Jun 2011 11:05 pm
La regla del body es irrelevante en este caso. Tenés un problema de floats, tenés que "desflotar".

El "oveflow:hidden" funciona, pero buscá "clearfix" que es el método más soportado entre todos los navegadores.

Por king-size

25 de clabLevel



 

Rosario, Argentina

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.