Ayuda urgente con div de alto automatico al 100%

[ravalos7]

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:

* {
padding: 0;
margin: 0;
}
 
html,body{
padding: 0px;
margin: 0px;
height: 100%;
 
} 
 
#content{
    left:0px;
    right:0px;
    width:auto;
    position:absolute;
    top:0px;
    bottom:0px;
    padding-bottom:30px;
    height:100%;
    min-height:100%;
}
 
#hoja{
    background: repeat #FFF;
    display:block;  
    width:850px;
    left:50%;
    margin-left:-425px; 
        
    position:absolute;
    top:0px;
    bottom:0px;
    height:auto;
    min-height:100%;
 
    
    z-index:1;
    
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    -khtml-border-radius: 14px;
    border-radius: 14px;
    border:#fff 1px solid;
    
    -moz-box-shadow: 7px 7px 10px #333;
    -webkit-box-shadow: 7px 7px 10px #333;
    -khtml-box-shadow: 7px 7px 10px #333;
    box-shadow:7px 7px 10px #333;
    display:block;
}
 

Les agradezco desde ya la ayuda que me puedan dar.

Saludos desde Chile,

Ricardo

[BloodShadow]

te dejo un ejemplo funcional

Código CSS:

.clear { clear: both; }
 .content { width: 200px; min-height: 10px; _height: 10px; }
 

Código HTML:

<div class="content">
 ACA TODO EL CONTENIDO QUE QUIERAS
 <div class="clear"></div>
</div>
 

Con esto te estirara todo lo que sea necesario...

[BloodShadow]

pon un clear antes de cerrar el div hoja y otro antes de cerrar el div content

[kseso?]

Todo el malfuncionamiento viene de cosas como las que le resalto en negrita:
#content {

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.

[ravalos7]

Gracias BloodShadow y kseso? por sus respectivas ayudas. Probaré ambos consejos y les cuento como me fue. ;)

[neysitc]

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:

#content{
/*......*/
overflow: hidden; 
height: 1%; /*Esto es para IE6*/
}
 

Acuerdate siempre overflow: hidden;

Suerte!!

[ravalos7]

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

[ravalos7]

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 ;)

[neysitc]

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:

#hoja {
-moz-border-radius:14px 14px 14px 14px;
-moz-box-shadow:7px 7px 10px #333333;
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #FFFFFF;
bottom:0;
display:block;
height:auto;
left:50%;
margin-left:-425px;
min-height:1024px;
position:absolute;
top:0;
width:850px;
z-index:1;
overflow: hidden;
}
 

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!!

[ravalos7]

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:

#content{
position:relative;
top:0px;
bottom:0px;
height:100%;
left:0px;
right:0px;
width:auto;
overflow:auto;
}
#hoja{
    position:relative;
    top:0px;
    bottom:0px;
    height:auto;
    min-height:110%;
    
    width:750px;
    left:50%;
    margin-left:-425px; 
    
    z-index:0;
    -moz-box-shadow: 7px 0px 7px #333;
    -webkit-box-shadow: 7px 0px 7px #333;
    -khtml-box-shadow: 7px 0px 7px #333;
    box-shadow:7px 0px 7px #333;
    
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    -khtml-border-radius: 14px;
    border-radius: 14px;
    border:#fff 1px solid;
    
    background-color:#FFF;
    
    padding-top:200px;
    padding-left:50px;
    padding-right:50px;
    padding-bottom:50px;        
}
.clear { clear: both; }
 

Y las capas quedaron:

Código HTML:

<div id="content">
     <div id="hoja">
          <div class="clear"></div>
      </div>
</div>
 

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

Saludos desde Chile,

Ricardo

[kseso?]

Mejor ese ejemplo. Pero siempre hay un pero, ;P)
Puede mejorar un poco más su css. Un ejemplo:

Código CSS:

#content {
height:100%;
position:relative;
width:100%;
}
#header {
height:210px;
position:fixed;
width:100%;
z-index:10;
}
#hoja {
-moz-border-radius:14px;
-moz-box-shadow:7px 0 7px #333333;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
margin:0 auto;
padding:200px 50px 50px;
position:relative;
width:750px;
z-index:1;
}
 

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.

[PHPaniel]

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