hacer que un div alcanse el alto del div padre

virla · #1 (**permalink**) 10/11/2007, 05:14

Bueno no se si se entiende, la cosa es asi tengo dos div uno dentro de otro el cual el que esta dentro seria una columna, la cosa es como ustedes saben que este cambia su alto a medida que tenga contenido pero cuando ese contenido no alcanza para cubrir todo el alto del div padre queda ahí y yo necesito que indistintamente que tenga o no datos este tenga el llegue hasta el final del div padre
Espero ser claro, desde ya agradezco la ayuda que puedan brindarme

webosiris · #2 (**permalink**) 10/11/2007, 05:35

hola, lo mejor en estos casos es usar la técnica de Falsas Columnas

virla · #3 (**permalink**) 10/11/2007, 06:13

Gracias amigo pero eso no me sirve sera que haya que hacerlo con javascript? Si alguien puede tirarme una punta estaria mas que agradecido

webosiris · #4 (**permalink**) 10/11/2007, 06:23

Cita:

Iniciado por virla

Gracias amigo pero eso no me sirve

y eso es porqué...

también podrías jugar con las propiedades
height
min-height (esta última no funcioan en ie6 pero hay formas de solucionarlo)

virla · #5 (**permalink**) 10/11/2007, 23:46

ok gracias voy a ver si con javascript lo soluciono mejor

mglorena · #6 (**permalink**) 12/11/2007, 18:57

Hola Virla,

y no te funciona hacer lo siguiente?

<style>
div#content
{
height:600px;
background:#ae9a00;
border:solid 1px black;
}
div#column
{
height:100%;
background:#eee;
width:120px;
}
</style>

<div id="content">
<div id="column"></div>

</div>

Saludos

virla · #7 (**permalink**) 12/11/2007, 19:51

Nop gracias

virla · #8 (**permalink**) 13/11/2007, 10:38

agrego
no recordava que ademas dentro del div principal tengo un secundario
con un div que contiene 3 div mas los cuales quiero igualar lo he tratado de hacer pero no me funciona ahi
y despues tengo otro con 2 div que ahi si me funciona pero a medias, ya que lo alinea pero me deja unos 10px menos.
alguno de los expertos que me puedan tirar una soga?
gracias

Daniel Ulczyk · #9 (**permalink**) 13/11/2007, 15:25

Fijáte en el siguiente enlace: 100% alto, finalmente para todos
Contáme como te fue. Saludos!

axz · #10 (**permalink**) 13/11/2007, 21:10

virla, sería bueno que postearas la estructura general de tus divs, es muy probable que algunas de las técnicas aquí expuestas te sean de utilidad

saludos

virla · #11 (**permalink**) 14/11/2007, 01:05

ok aca les dejo un ejemplo

Código:

<style type="text/css" media="screen"><!--
div#logo { height: 50px; width: 630px; left: 10px; top: 10px; position: absolute; visibility: visible; }
div#ContenedorGral { height: auto; width: 630px; left: 10px; top: 70px; position: absolute; visibility: visible; }
div#Contenedor1 { width: 350px; left: 10px; top: 10px; position: absolute; height: auto; visibility: visible; }
div#ColumnaDest { background-color: #ffd400; height: auto; width: 130px; left: 370px; top: 10px; position: absolute; visibility: visible; }
div#ColumnaMenu { background-color: #6cf; height: auto; width: 110px; left: 510px; top: 10px; position: absolute; visibility: visible; }
div#NotChica01 { height: auto; width: 100px; left: 10px; top: 0; position: absolute; visibility: visible; }
div#NotChica02 { height: auto; width: 100px; left: 120px; top: 0; position: absolute; visibility: visible; }
div#NotChica03 { height: auto; width: 100px; left: 230px; top: 0; position: absolute; visibility: visible; }
div#Contenedor2 { height: auto; width: 350px; left: 10px; top: 40px; position: absolute; visibility: visible; }
div#NotChicaG01 { height: auto; width: 160px; left: 20px; top: 1px; position: absolute; visibility: visible; }
div#NotChicaG02 { height: auto; width: 160px; left: 180px; top: 1px; position: absolute; visibility: visible; }
--></style>
    </head>

    <body>
        <div id="logo">Aqui el logo de la página</div>
        <div id="ContenedorGral">
            <div id="Contenedor1">
                <div id="NotChica01">Noticia 01</div>
                <div id="NotChica02">Noticia 02</div>
                <div id="NotChica03">Noticia 03</div>
            </div>
            <div id="Contenedor2">
                <div id="NotChicaG01">Noticia Destacada 01</div>
                <div id="NotChicaG02">Noticia Destacada 02</div>
            </div>
            <div id="ColumnaDest">Columna Destacada</div>
            <div id="ColumnaMenu">Columna Menu</div>
        </div>

Bueno espero recibir la ayuda

PD: Las columnas que quiero igualar son:
ColumnaDest con ColumnaMenu
NotChica01,NotChica02 y NotChica03
NotChicaG01 y NotChicaG01

axz · #12 (**permalink**) 14/11/2007, 08:09

virla, creo que tu problema se resuelve con lo que propone Daniel Ulczyk, sin embargo hay un detalle en tu código CSS, es probable que dicha técnica no te funcione si usas position: absolute;, intenta:
* eliminando el posicionamiento absoluto
* flota los divs a la izquierda
* elimina el contenido lateral de ContenedorGral
* aplica la técnica de Daniel Ulczyk

... con eso debe bastar

Código HTML:

div{ float: left; }
div#logo { height: 50px; width: 630px; left: 10px; top: 10px; visibility: visible; }
div#ContenedorGral { height: auto; width: 630px; left: 10px; top: 70px; visibility: visible; clear:both; }
div#Contenedor1 { width: 350px; left: 10px; top: 10px; height: auto; visibility: visible; }
div#ColumnaDest { background-color: #ffd400; height: auto; width: 130px; left: 370px; top: 10px; visibility: visible; }
div#ColumnaMenu { background-color: #6cf; height: auto; width: 110px; left: 510px; top: 10px; visibility: visible; }
div#NotChica01 { height: auto; width: 100px; left: 10px; top: 0; visibility: visible; }
div#NotChica02 { height: auto; width: 100px; left: 120px; top: 0; visibility: visible; }
div#NotChica03 { height: auto; width: 100px; left: 230px; top: 0; visibility: visible; }
div#Contenedor2 { height: auto; width: 350px; left: 10px; top: 40px; visibility: visible; }
div#NotChicaG01 { height: auto; width: 160px; left: 20px; top: 1px; visibility: visible; }
div#NotChicaG02 { height: auto; width: 160px; left: 180px; top: 1px; visibility: visible; }

solo falta aplicar lo de 100% alto ... Por cierto, creo que el visibility: visible; está de más, suerte

virla · #13 (**permalink**) 14/11/2007, 08:22

Sori los tengo con fload el tema es que posteo de mi trabajo y genere el codigo. Con adobe golive para hacerlo rapido y sin mucho tipeo. Con respecto a tu sugerencia tengo la columna destacada y menu asi y me funciona super bien pero con las demas no se porque no lo hace

axz · #14 (**permalink**) 14/11/2007, 08:54

Cita:

Iniciado por virla

... tengo la columna destacada y menu asi y me funciona super bien pero con las demas no se porque no lo hace ...

Ah bien sencillo, si entendiste la técnica, necesitarías 3 columnas, como lo entiendo necesitarás estos agregados a tu código:

Código HTML:

<style type="text/css">
...
div#ContenedorGral
{
  overflow: hidden;
}

div#colG, div#ColumnaDest, div#ColumnaMenu
{
  padding-bottom: 30000px;
  margin-bottom: -30000px;
}
</style>
...
   <div id="logo">Aqui el logo de la página</div>
    <div id="ContenedorGral">
      <div id="colG">
        <div id="Contenedor1">
            <div id="NotChica01">Noticia 01</div>
            <div id="NotChica02">Noticia 02</div>
            <div id="NotChica03">Noticia 03</div>
        </div>
        <div id="Contenedor2">
            <div id="NotChicaG01">Noticia Destacada 01</div>
            <div id="NotChicaG02">Noticia Destacada 02</div>
        </div>
      </div>
      <div id="ColumnaDest">Columna Destacada</div>
      <div id="ColumnaMenu">Columna Menu</div>
    </div>
...

Si te fijas solo hizo falta meter contenedor1 y contenedor2 en otro DIV

que es el que tendrá el mismo alto

No sé si entendí bien el esquema que propones, creo que es así no? ... jajaja, saludos

ghosthead-nebula · #15 (**permalink**) 15/11/2007, 22:11

Yo tengo un problema similar. Esta vez con divs internos dentro de una celda.

Mi problema es que, cuando no tengo mucha información en el div interno, la celda se colapsa hasta alcanzar el tamaño del contenido. Imagínenense si en un fichero lo que tengo es, inicialmente, un select? El footer muy arriba y lo demás es espacio vacío. Intenté con height 100% y me lo soluciona... parcialmente, porque cuando hay un overflow (por ejemplo, mucha info en esa celda), se observa una cierta separación entre la celda central y la celda inferior (el footer). Eso en Firefox, porque en IE6 me funciona bien (aunque un amigo lo probó en IE7 y parece que presenta el mismo problema). Lo intenté con min-heingt, y me solucionó el problema del vacío, aunque me creó otro: Se puede ver el contenedor de la celda intermedia llegando al final, pero cuando no hay mucha información, la celda con el footer se sube, quedando montada sobre la otra, y en IE6 ese método ni siquiera funciona en celdas con poco contenido (bueno, ya eso lo habían dicho con anterioridad)

Entonces opté por no ponerle height 100% al div de la celda (pero sí a la celda en sí, o sea, al TD). Y me evito esa separación fea, pero me queda el problema del espacio vacío... quiero el footer en donde corresponde, no tan arriba. Alguna sugerencia?

(intenté el método sugerido por Daniel, pero no me sirvió de nada, pues la celda se colapsa en IE6 y no me soluciona el problema del tamaño en celdas menores).

Qué hago? T-T

talmente · #16 (**permalink**) 16/11/2007, 03:38

La solución para las falsas columnas son las niftycube amigos.

virla · #17 (**permalink**) 16/11/2007, 04:09

Si eso lo se pero con ese tengo dramas con otras cosas es por eso que pedi algo que haga lo mismo y la solucion mejor fue con javascript que me paso un buen amigo al comienzo del post pero como tengo varias ahí es donde algunas no suelen andar bien

talmente · #18 (**permalink**) 16/11/2007, 04:49

quizas con esto NiftyLoad=function(){ en vez de esto window.onload=function(){ y que el script de nisftycube sean los ultimo

talmente · #19 (**permalink**) 16/11/2007, 05:49

en realidad yo también tengo un problema con un script que carga html exteno en un div y me deshabilita las niftycube

virla · #20 (**permalink**) 16/11/2007, 06:35

bueno amigos he probado el nitz asi como vos me decis pero ahora no se porque no funciona y metiendo mano a lo que me dejo el amigo Daniel Ulczyk logre hacer que todos funcionen bien y que me iguale todas las columnas, pero... Siempre hay un pero necesitaria saber como hacer para sacar el valod de altura de dos o mas columnas y en vez de espesificar una ponga solo la mayor y sobre esa saque el tamano

virla · #21 (**permalink**) 16/11/2007, 07:29

bueno amigos he probado el nitz asi como vos me decis pero ahora no se porque no funciona y metiendo mano a lo que me dejo el amigo Daniel Ulczyk logre hacer que todos funcionen bien y que me iguale todas las columnas, pero... Siempre hay un pero necesitaria saber como hacer para sacar el valod de altura de dos o mas columnas y en vez de espesificar una ponga solo la mayor y sobre esa saque el tamano

ghosthead-nebula · #22 (**permalink**) 16/11/2007, 08:35

niftycube? Oo

Qué es eso?

axz · #23 (**permalink**) 16/11/2007, 08:55

Cita:

Iniciado por ghosthead-nebula

niftycube? Oo Qué es eso?

Un pequeño agregado de js y css para hacer monerías con cajas ... chécalo acá, aunque insisto que con la opción de Daniel funciona

Saludos

ghosthead-nebula · #24 (**permalink**) 16/11/2007, 09:46

Yo insisto que con la opción de Daniel NO me funcionó u.u

O será que no sirve para lo que estoy buscando? >.>

Del link que proporcionó Daniel tome lo del clear-fix para arreglar lo del overflow en las cajas internas (para que FF amplíe su caja). Pero lo otro no.

De todos modos probaré de nuebo.

virla · #25 (**permalink**) 16/11/2007, 11:00

La opcion de daniel me funciona y de mil maravillas muchachos, si alguno puede decirme como soluciono el problema de averiguar cual de las columnas es mas grande lo termino y posteo el codigo completo con una demo para que puedan probarlo, ok

Sori me equivoque: es que poste aca y en javascript, asique lo de daniel ami tampoco me funciona, pero el de javascript si
aca les dejo un ejemplo

este es mi post http://www.forosdelweb.com/f13/igualar-capas-532228/

[codigo]

<script type="text/javascript">
function setH() {
var maxH = Math.max(document.getElementById('contenedor').off setHeight,document.getElementById('content').offse tHeight);
document.getElementById('content').style.height=ma xH+'px';
var maxH = Math.max(document.getElementById('contenedor').off setHeight,document.getElementById('navigation').of fsetHeight);
document.getElementById('content').style.height=ma xH+'px';
document.getElementById('navigation').style.height =maxH+'px';
}

window.onload=setH;
</script>
[/codigo]

virla · #26 (**permalink**) 16/11/2007, 11:05

Ahora con ese me funciona de mil maravillas pero si me pueden dar una mano con esto seria bueno

haber explico mejor
tengo 3 columnas
col1, col2 col3 y el contenedor ok
ahora si yo por el javascript de daniel estipulo que ponga la de una columna puede que quede bien o no, dado a que no se cual de las columnas es mayor el alto.
osea como de javascript no se casi nada digamos que lo mio es solo meter mano y probar
hay que averiaguar cual de las tres columnas es mayor y a esta la ponemos como patron a tomar y todo arreglado

ghosthead-nebula · #27 (**permalink**) 16/11/2007, 11:19

Ya lo resolví. Usé los famosos !important y el min-height, sacando los contenedores de las tablas (las tuve que eliminar). Ahora sí hace lo que quiero, al menos en FF e IE6

axz · #28 (**permalink**) 16/11/2007, 11:28

virla, el detalle es que en el ejemplo de 100% alto no usas nada de javascript, solo CSS y debido a que prácticamente se deja crecer libremente los divs y se oculta el sobrante, dudo que con javascript se pueda obtener la altura real de los divs, en tal caso obtendrías la altura del div en el momento en que se asigna una altura con las mismas css

Saludos

axz · #29 (**permalink**) 16/11/2007, 11:38

Cita:

Iniciado por ghosthead-nebula

Ya lo resolví. Usé los famosos !important y el min-height, sacando los contenedores de las tablas (las tuve que eliminar). Ahora sí hace lo que quiero, al menos en FF e IE6

tenías los divs en tablas? ... perdón por la necedad, pero creo que por eso no te funcionaba lo del 100% alto

Como sea, qué bueno que lo resolviste

saludos

ghosthead-nebula · #30 (**permalink**) 16/11/2007, 13:29

Qué te puedo decir axz? Soy una principiante *blush*