Foros del Web » Creando para Internet » CSS »

hacer que un div alcanse el alto del div padre

Estas en el tema de hacer que un div alcanse el alto del div padre en el foro de CSS en Foros del Web. 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 ...

  #1 (permalink)  
Antiguo 10/11/2007, 05:14
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #2 (permalink)  
Antiguo 10/11/2007, 05:35
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: hacer que un div alcanse el alto del div padre

hola, lo mejor en estos casos es usar la técnica de Falsas Columnas
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 10/11/2007, 06:13
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

Gracias amigo pero eso no me sirve sera que haya que hacerlo con javascript? Si alguien puede tirarme una punta estaria mas que agradecido
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #4 (permalink)  
Antiguo 10/11/2007, 06:23
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: hacer que un div alcanse el alto del div padre

Cita:
Iniciado por virla Ver Mensaje
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)
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 10/11/2007, 23:46
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

ok gracias voy a ver si con javascript lo soluciono mejor
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #6 (permalink)  
Antiguo 12/11/2007, 18:57
Avatar de mglorena  
Fecha de Ingreso: noviembre-2007
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: hacer que un div alcanse el alto del div padre

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
  #7 (permalink)  
Antiguo 12/11/2007, 19:51
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

Nop gracias
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #8 (permalink)  
Antiguo 13/11/2007, 10:38
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #9 (permalink)  
Antiguo 13/11/2007, 15:25
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: hacer que un div alcanse el alto del div padre

Fijáte en el siguiente enlace: 100% alto, finalmente para todos
Contáme como te fue. Saludos!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #10 (permalink)  
Antiguo 13/11/2007, 21:10
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: hacer que un div alcanse el alto del div padre

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
  #11 (permalink)  
Antiguo 14/11/2007, 01:05
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla

Última edición por virla; 14/11/2007 a las 01:10
  #12 (permalink)  
Antiguo 14/11/2007, 08:09
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: hacer que un div alcanse el alto del div padre

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
  #13 (permalink)  
Antiguo 14/11/2007, 08:22
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #14 (permalink)  
Antiguo 14/11/2007, 08:54
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: hacer que un div alcanse el alto del div padre

Cita:
Iniciado por virla Ver Mensaje
... 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
  #15 (permalink)  
Antiguo 15/11/2007, 22:11
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: hacer que un div alcanse el alto del div padre

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
__________________
Mis dibujos: Click Aquí
  #16 (permalink)  
Antiguo 16/11/2007, 03:38
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Re: hacer que un div alcanse el alto del div padre

La solución para las falsas columnas son las niftycube amigos.
  #17 (permalink)  
Antiguo 16/11/2007, 04:09
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #18 (permalink)  
Antiguo 16/11/2007, 04:49
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Re: hacer que un div alcanse el alto del div padre

quizas con esto NiftyLoad=function(){ en vez de esto window.onload=function(){ y que el script de nisftycube sean los ultimo
  #19 (permalink)  
Antiguo 16/11/2007, 05:49
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Re: hacer que un div alcanse el alto del div padre

en realidad yo también tengo un problema con un script que carga html exteno en un div y me deshabilita las niftycube
  #20 (permalink)  
Antiguo 16/11/2007, 06:35
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #21 (permalink)  
Antiguo 16/11/2007, 07:29
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #22 (permalink)  
Antiguo 16/11/2007, 08:35
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: hacer que un div alcanse el alto del div padre

niftycube? Oo

Qué es eso?
__________________
Mis dibujos: Click Aquí
  #23 (permalink)  
Antiguo 16/11/2007, 08:55
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: hacer que un div alcanse el alto del div padre

Cita:
Iniciado por ghosthead-nebula Ver Mensaje
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
  #24 (permalink)  
Antiguo 16/11/2007, 09:46
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: hacer que un div alcanse el alto del div padre

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.
__________________
Mis dibujos: Click Aquí
  #25 (permalink)  
Antiguo 16/11/2007, 11:00
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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]
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla

Última edición por virla; 16/11/2007 a las 11:13 Razón: corregir error
  #26 (permalink)  
Antiguo 16/11/2007, 11:05
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 893
Antigüedad: 15 años, 5 meses
Puntos: 1
Re: hacer que un div alcanse el alto del div padre

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
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla

Última edición por virla; 16/11/2007 a las 11:14 Razón: corregir error
  #27 (permalink)  
Antiguo 16/11/2007, 11:19
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: hacer que un div alcanse el alto del div padre

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
__________________
Mis dibujos: Click Aquí
  #28 (permalink)  
Antiguo 16/11/2007, 11:28
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: hacer que un div alcanse el alto del div padre

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
  #29 (permalink)  
Antiguo 16/11/2007, 11:38
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: hacer que un div alcanse el alto del div padre

Cita:
Iniciado por ghosthead-nebula Ver Mensaje
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
  #30 (permalink)  
Antiguo 16/11/2007, 13:29
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: hacer que un div alcanse el alto del div padre

Qué te puedo decir axz? Soy una principiante *blush*
__________________
Mis dibujos: Click Aquí
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 11:22.