Foros del Web » Creando para Internet » CSS »

Ayuda urgente con div de alto automatico al 100%

Estas en el tema de Ayuda urgente con div de alto automatico al 100% en el foro de CSS en Foros del Web. Amigos, No crean por favor que no he buscado antes en el foro, viendo los temas antiguos sobre este problema, pero nada me ha resultado. ...
  #1 (permalink)  
Antiguo 19/11/2010, 15:00
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 100
Antigüedad: 11 años, 2 meses
Puntos: 0
Pregunta Ayuda urgente con div de alto automatico al 100%

Amigos,

No crean por favor que no he buscado antes en el foro, viendo los temas antiguos sobre este problema, pero nada me ha resultado.

Estoy construyendo el siguiente sitio: http://buscaconce.technodis.cl/

En este sitio, existe un div central el que deseo que por lógica se vaya expandiendo según el contenido, cosa que en la practica no ocurre, sino que el contenido pasa por encima del contenedor.

Vean el mismo sitio pero con los ultimos cambios que comento:http://buscaconce.technodis.cl/test

Al pinchar sobre cada uno de los encabezados de las noticias y desplegarse estas, el conjunto sobre pasa al contenedor, en vez de que el contenedor se expanda o este por defecto al 100% para que no ocurra.

Como se imaginaran he modificado por css esa capa colocando estilos como los sig.

- heigth:100%:
- min-heigth:100%;


- top 0;
bottom:0;
height:auto;
min-heigth:100%;


Nada de lo anterior funciona. Ya casi tengo el listo el sitio para entregarlo, pero no puedo porque esa dichosa capa no se expande, idealmente al 100% de la página. He intentado todo lo que se me ha ocurrido pero no funciona.

Les comento que esta capa llamada #hoja, tiene una contenedora llamada #content. Aquí les va los estilos que estoy implementando.

Código CSS:
Ver original
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }
  5.  
  6. html,body{
  7. padding: 0px;
  8. margin: 0px;
  9. height: 100%;
  10.  
  11. }
  12.  
  13. #content{
  14.     left:0px;
  15.     right:0px;
  16.     width:auto;
  17.     position:absolute;
  18.     top:0px;
  19.     bottom:0px;
  20.     padding-bottom:30px;
  21.     height:100%;
  22.     min-height:100%;
  23. }
  24.  
  25. #hoja{
  26.     background: repeat #FFF;
  27.     display:block; 
  28.     width:850px;
  29.     left:50%;
  30.     margin-left:-425px;
  31.        
  32.     position:absolute;
  33.     top:0px;
  34.     bottom:0px;
  35.     height:auto;
  36.     min-height:100%;
  37.  
  38.    
  39.     z-index:1;
  40.    
  41.     -moz-border-radius: 14px;
  42.     -webkit-border-radius: 14px;
  43.     -khtml-border-radius: 14px;
  44.     border-radius: 14px;
  45.     border:#fff 1px solid;
  46.    
  47.     -moz-box-shadow: 7px 7px 10px #333;
  48.     -webkit-box-shadow: 7px 7px 10px #333;
  49.     -khtml-box-shadow: 7px 7px 10px #333;
  50.     box-shadow:7px 7px 10px #333;
  51.     display:block;
  52. }

Les agradezco desde ya la ayuda que me puedan dar.

Saludos desde Chile,

Ricardo
  #2 (permalink)  
Antiguo 19/11/2010, 15:08
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años
Puntos: 52
Respuesta: Ayuda urgente con div de alto automatico al 100%

te dejo un ejemplo funcional


Código CSS:
Ver original
  1. .clear { clear: both; }
  2.  .content { width: 200px; min-height: 10px; _height: 10px; }

Código HTML:
Ver original
  1. <div class="content">
  2.  ACA TODO EL CONTENIDO QUE QUIERAS
  3.  <div class="clear"></div>
  4. </div>

Con esto te estirara todo lo que sea necesario...
  #3 (permalink)  
Antiguo 19/11/2010, 15:15
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años
Puntos: 52
Respuesta: Ayuda urgente con div de alto automatico al 100%

pon un clear antes de cerrar el div hoja y otro antes de cerrar el div content
  #4 (permalink)  
Antiguo 19/11/2010, 15:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Ayuda urgente con div de alto automatico al 100%

Todo el malfuncionamiento viene de cosas como las que le resalto en negrita:
#content {
Cita:
position:absolute;
bottom:0;
top:0;
right:0;
left:0;

height:100%;
min-height:100%;
padding-bottom:30px;
width:auto;
}
Los elementos posicionados con el valor absoluto salen del flujo del documento. Esto significan que el resto (incluido su padre o contenedor) se comportan como si no existiesen en algunos aspectos:
.-Como el tamaño de sus ancestros: no los fuerzan a crecer. De ahí la necesidad de tener que declarar tamaños expresamente (previo cálculo) o que haya desbordes (como le ocurre) si varían los contenidos "dinámicamente". También es el origen de tanto div de corte (clear:both) o del uso del overflow.
.-Al resto de elementos hay que modificarles su posición natural para evitar solapamientos.

Cuál es la alternativa, entonces:
.-Evitar el uso de position:absolute excepto cuando sea imprescindible.
.-Elementos con "relative", para que se vayan posicionando en su lugar correspondiente por el orden de aparición y que los demás actúen en consecuencia (tamaños, lugar donde se deben colocar, forzan el crecimiento de los ancestros... etc).

Puede ampliar información y así aplicar más correctamente las propiedades de css y evitarse problemas en los manuales de www.librosweb.es y en "la guía de migración sin dolor" de Mikmoro (está entre los importantes de este foro)

P.D.: ¿Se fijó donde se entrevé su #footer? La razón, lo comentado anteriormente relativo al flujo del html. Como todo lo anterior está con absolute y ese div en relative, pues eso.
  #5 (permalink)  
Antiguo 19/11/2010, 21:04
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 100
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Ayuda urgente con div de alto automatico al 100%

Gracias BloodShadow y kseso? por sus respectivas ayudas. Probaré ambos consejos y les cuento como me fue. ;)
  #6 (permalink)  
Antiguo 19/11/2010, 21:11
Avatar de neysitc  
Fecha de Ingreso: noviembre-2010
Ubicación: alert('Peru')
Mensajes: 47
Antigüedad: 6 años, 4 meses
Puntos: 5
Respuesta: Ayuda urgente con div de alto automatico al 100%

Amigo te doy la Solucion perfecta; Que funcionará en todos tus diseños web del futuro :

En CSS hay un propiedad llamada overflow , lo que hace que el DIV , vaya creciendo de acuerdo al contenido.

No necesitas agregar ni min-height , que la verdad es para otra cosa.

A tu content agrega esto asi por ejemplo:


Código CSS:
Ver original
  1. #content{
  2. /*......*/
  3. overflow: hidden;
  4. height: 1&#37;; /*Esto es para IE6*/
  5. }

Acuerdate siempre overflow: hidden;

Suerte!!
  #7 (permalink)  
Antiguo 19/11/2010, 21:16
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 100
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Ayuda urgente con div de alto automatico al 100%

Kseso?,

En un comienzo la capa contenedora (#content), efectivamente la tenía con posicionamiento relativo, de tal modo que las que coloque dentro puedan tener posicionamiento absoluto y se vean bien incluido en el enfermante iexplorer.

La razon de cambiarlo a absoluto, fue la de probar otro truquito que alguna vez me funciono (lamentablemente esta vez no :( ), especificar top:0, bottom 0 y heigth en auto, para que siempre quedara al 100%, pero no me hizo ningún caso :(

Probaré los div de corte y les cuento amigos. Ahh y les reitero mis agradecimientos x su ayuda.

Saludos desde Chile,

Ricardo
  #8 (permalink)  
Antiguo 19/11/2010, 21:19
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 100
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Ayuda urgente con div de alto automatico al 100%

neysitc,

Gracias por tu ayuda pero creo que estas en un ligero error. El overflow más que hacer que la capa vaya creciendo, permite que se muestre u oculte el contenido que sea más grande que el contenedor y no que este efectivamente crezca que es lo que necesito con urgencia, pues ya no me va quedando pelo bueno tanto que me los he tirado de la rabia x que no me funciona jejeje.

Nunca tanto hasta quedar calvo pero es una verdadera prueba a mi paciencia ;)
  #9 (permalink)  
Antiguo 19/11/2010, 21:40
Avatar de neysitc  
Fecha de Ingreso: noviembre-2010
Ubicación: alert('Peru')
Mensajes: 47
Antigüedad: 6 años, 4 meses
Puntos: 5
Respuesta: Ayuda urgente con div de alto automatico al 100%

Amigo mira.

Viendo tu problema , inspecionandolo con el FIREBUG. El div que deseas que crezca s llama HOJA .

Y sigo insistiendo que el overflow funciona:

Arregla si:

Código CSS:
Ver original
  1. #hoja {
  2. -moz-border-radius:14px 14px 14px 14px;
  3. -moz-box-shadow:7px 7px 10px #333333;
  4. background:none repeat scroll 0 0 #FFFFFF;
  5. border:1px solid #FFFFFF;
  6. bottom:0;
  7. display:block;
  8. height:auto;
  9. left:50&#37;;
  10. margin-left:-425px;
  11. min-height:1024px;
  12. position:absolute;
  13. top:0;
  14. width:850px;
  15. z-index:1;
  16. overflow: hidden;
  17. }

Si funciona porque ya lo probé con el firebug.

Debes darles un poco de margin-bottom as esos divs que se expanden para que luzcan mejor.

Bueno y para nada te recomiendo el position absoulta , si simplemente es un div que esta dentro de un contenedor!!

Última edición por neysitc; 19/11/2010 a las 21:42 Razón: Sugerencia
  #10 (permalink)  
Antiguo 19/11/2010, 22:28
Avatar de ravalos7  
Fecha de Ingreso: diciembre-2005
Mensajes: 100
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Ayuda urgente con div de alto automatico al 100%

Amigos,

Gracias a todos por su ayuda, pues saqué un poco de las sugerencias que cada quien me dió.

Kseso, Tenías toda la razón, mira la prueba que hice: http://buscaconce.technodis.cl/prueba.html

En este ejemplo la capa #content (contenedora) y #hoja tienen ambas posicionamiento relativo y ahora el contenido de hoja, respeta los limites de su contenedor.

Al final los estilos quedaron así:

Código CSS:
Ver original
  1. #content{
  2. position:relative;
  3. top:0px;
  4. bottom:0px;
  5. height:100&#37;;
  6. left:0px;
  7. right:0px;
  8. width:auto;
  9. overflow:auto;
  10. }
  11. #hoja{
  12.     position:relative;
  13.     top:0px;
  14.     bottom:0px;
  15.     height:auto;
  16.     min-height:110%;
  17.    
  18.     width:750px;
  19.     left:50%;
  20.     margin-left:-425px;
  21.    
  22.     z-index:0;
  23.     -moz-box-shadow: 7px 0px 7px #333;
  24.     -webkit-box-shadow: 7px 0px 7px #333;
  25.     -khtml-box-shadow: 7px 0px 7px #333;
  26.     box-shadow:7px 0px 7px #333;
  27.    
  28.     -moz-border-radius: 14px;
  29.     -webkit-border-radius: 14px;
  30.     -khtml-border-radius: 14px;
  31.     border-radius: 14px;
  32.     border:#fff 1px solid;
  33.    
  34.     background-color:#FFF;
  35.    
  36.     padding-top:200px;
  37.     padding-left:50px;
  38.     padding-right:50px;
  39.     padding-bottom:50px;       
  40. }
  41. .clear { clear: both; }

Y las capas quedaron:

Código HTML:
Ver original
  1. <div id="content">
  2.      <div id="hoja">
  3.           <div class="clear"></div>
  4.       </div>
  5. </div>



Muchas gracias a todos quienes ayudaron, como dicen siempre se aprende algo nuevo!!!

Saludos desde Chile,

Ricardo
  #11 (permalink)  
Antiguo 20/11/2010, 07:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Ayuda urgente con div de alto automatico al 100%

Mejor ese ejemplo. Pero siempre hay un pero, ;P)
Puede mejorar un poco más su css. Un ejemplo:
Código CSS:
Ver original
  1. #content {
  2. height:100&#37;;
  3. position:relative;
  4. width:100%;
  5. }
  6. #header {
  7. height:210px;
  8. position:fixed;
  9. width:100%;
  10. z-index:10;
  11. }
  12. #hoja {
  13. -moz-border-radius:14px;
  14. -moz-box-shadow:7px 0 7px #333333;
  15. background-color:#FFFFFF;
  16. border:1px solid #FFFFFF;
  17. margin:0 auto;
  18. padding:200px 50px 50px;
  19. position:relative;
  20. width:750px;
  21. z-index:1;
  22. }
Siga por ahí, y tenga a mano tanto la guía de Mikmoro como los manuales de la página que le enlacé. Verá como con un mínimo de interés como está poniendo y alguna consulta por aquí, mejora día a día.
  #12 (permalink)  
Antiguo 11/08/2011, 15:09
Avatar de PHPaniel  
Fecha de Ingreso: abril-2011
Mensajes: 16
Antigüedad: 5 años, 11 meses
Puntos: 2
De acuerdo Respuesta: Ayuda urgente con div de alto automatico al 100%

A MI TAMBIEN ME SIRVIO ESTE POST BASTANTE, LO DEL CLEAR ARRIBA Y ABAJO!!! DESDE PERU !! SALUDOS!!!

Etiquetas: 100%, alto, automatico, height
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:26.