Foros del Web » Creando para Internet » HTML »

Que los div lleguen hasta el final

Estas en el tema de Que los div lleguen hasta el final en el foro de HTML en Foros del Web. Hola. A ver si me explico, que el asunto no me ha quedado muy bien. Una pagina con tres div, izquierdo, centro y derecho y ...
  #1 (permalink)  
Antiguo 06/04/2010, 13:52
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 10 meses
Puntos: 6
Que los div lleguen hasta el final

Hola. A ver si me explico, que el asunto no me ha quedado muy bien.

Una pagina con tres div, izquierdo, centro y derecho y un pie de pagina con clear:Both. Posicionados de forma flotante.

El div izquierdo tienes varias lineas, el del centro tiene muchas, y el derecho pocas. Que ocurre, que el div del centro al tener muchas lineas, llega hasta abajo, pero los otros dos, al tener pocas lineas, se cortan enseguida (si tenemos tres fondos con colores diferentes, se nota lo que comento).

La pregunta es si se puede hacer que, aunque los div laterales tengas pocas líneas, que llegan hasta abajo con el color de su fondo.

Un saludo.
  #2 (permalink)  
Antiguo 06/04/2010, 14:27
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Tokyo - Japan !
Mensajes: 3.867
Antigüedad: 14 años, 6 meses
Puntos: 334
Respuesta: Que los div lleguen hasta el final

probaste ya dandole a los div la propiedad height:100%?

Código HTML:
Ver original
  1. <div style="height:100%;">foobar</div>
__________________
More about me...
~ @rhyudek1
~ Github
  #3 (permalink)  
Antiguo 06/04/2010, 14:38
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: Que los div lleguen hasta el final

HOla. Los Div no tengo nada en la propiedad Height, pero he probado lo que me has dicho y se queda igual que estaba
  #4 (permalink)  
Antiguo 06/04/2010, 15:21
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Tokyo - Japan !
Mensajes: 3.867
Antigüedad: 14 años, 6 meses
Puntos: 334
Respuesta: Que los div lleguen hasta el final

agregale a la etiqueta body la misma propiedad entonces

Código CSS:
Ver original
  1. body{ height:100&#37;; }
__________________
More about me...
~ @rhyudek1
~ Github
  #5 (permalink)  
Antiguo 07/04/2010, 04:47
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: Que los div lleguen hasta el final

Hola. Gracias por tus respuesta, pero sigue sin funcionar.

Tengo la etiqueta body, despues un div contenedor y dentro de este, tres div que son de los que hablamos.

Les he puesto a todos height: 100%, pero no me funciona, no se porque, pero nada de nada.

Un saludo.
  #6 (permalink)  
Antiguo 10/04/2010, 10:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: Que los div lleguen hasta el final

Hola:

En el propio foro se ha hablado bastantes veces de este tema, busca información sobre columnas equilibradas.

Saludos.

  #7 (permalink)  
Antiguo 10/04/2010, 11:36
Avatar de jhsilva  
Fecha de Ingreso: mayo-2009
Mensajes: 85
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: Que los div lleguen hasta el final

Una solución que te podria servir para que los 3 divs (izquierda,centro y derecha terminen en la misma dimensión es:

-Crea una imagen que contenga los 3 colores de las 3 secciones que sea del width total de las 3 secciones y altura unos 5px.
-Luego creas un div solamente por ejemplo #contenido y a ese div le pones la medida de la imagen de ancho y al alto lo repites. Asi crecerán las 3 barras hasta que se acabe el contenido.

Esta seria la idea en la hoja de estilo suponiendo que nuestra imagen de fondo será 1000x5px; :

#contenido{
bakcground-image:url(mifondo.png);
background-repeat:repeat-y; /* No estoy seguro si es repeat x o y en este caso */
width:1000px;
height:auto;
}

Espero haber aportado a que encuentres tú solución.

jhsilva
  #8 (permalink)  
Antiguo 10/04/2010, 15:03
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: Que los div lleguen hasta el final

aplicando al div el 100% de height los elementos anteriores (contenedores) deben tener la misma propiedad y valor para que funcione.

pero creo que te sera util como menciona jomaruro en el #6
Busca aqui:
http://www.araudi.net/
__________________
Toroflix - movies.
  #9 (permalink)  
Antiguo 12/04/2010, 03:32
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: Que los div lleguen hasta el final

Hola Amigos. Gracias por vuestras respuestas, pero, lamenablamente, por unas cosas o por otras, soy incapaz de ajustarlo a mis necesidades.
He simplificado el codigo en un ejemplo que os pongo ahora, porque estoy convencido de que lo que busco es mas o menos sencillo, solo que yo no estoy todo lo avispado que debería. Mirad, este es el ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style>
body {
text-align:center;
height: 100%;
}

#pagina{
width: 800px;
margin: 0 auto;
height: 100%;
}

#cabecera {
width: 100%;
background-color: #009900;}

#lateral_izquierdo{
background-color: #CC99CC;
float: left;
width: 20%;
}

#cuerpo{
background-color: #990033;
width: 60%;
float: left;
}

#lateral_derecho{
background-color: #FFCCCC;
width: 20%;
float: right;
}

#pie {
width: 100%;
clear:both;
background-color: #CC66FF;
}
</style>


</head>

<body>

<div id="pagina">

<div id="cabecera">
<p>cabecera</p>
</div>

<div id="lateral_izquierdo">
<p>lateral izquierdo</p>
</div>

<div id="cuerpo">
<p>cuerpo</p>
</div>

<div id="lateral_derecho">
<p>lateral derecho</p>
</div>

<div id="pie">
<p>pie</p>
</div>

</div>

</body>
</html>

En base a este ejemplo de lo mas simple, quiero que, cuando el div lateral_izquierdo tengas varias lineas, que los div cuerpo y lateral_derecho tengan el mismo alto que el div lateral_izquierdo.
Cuando el div cuerpo tengas varias lineas, que los div lateral izquierdo y derecho tengan el mismo alto que el div cuerpo.
Y que cuando el div lateral derecho tenga varias lineas, los div lateral izquierdo y cuerpo tengan el mismo alto que el div lateral derecho.

Bueno, pues esto, desde de varios dias, no soy capaz de conseguirlo.

A ver si me podeis ayudar, por favor. Muchas Gracias.
  #10 (permalink)  
Antiguo 12/04/2010, 15:14
 
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 14 años
Puntos: 1
Respuesta: Que los div lleguen hasta el final

Hola!!
como bien te explican ahi tendrias que hacer una imagen con los colores de fondo que tienes ai y esas 3 capas(izquierda,centro y derecha) meterlas dentro de un div yo le llame contenido y ponerle una imagen de fondo y que solo se repita en el eje de las y.
la imagen de fondo tiene que ser la que previamente creaste.
yo te puse las medidas en pixeles que me es mas comodo .
te pego el codigo y espero haberte ayudado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style>
body {
text-align:center;

}

#pagina{
width: 800px;
margin: 0 auto;
height: 100%;


}

#cabecera {
width: 800px;
background-color: #009900;}

#contenido{
overflow:hidden;
background-image:url(contenido.gif);
background-repeat: repeat-y;

}

#lateral_izquierdo{
float: left;
width: 200px;
background-color:#cc99cc;

}

#cuerpo{
background-color: #990033;
width: 400px;
float: left;

}

#lateral_derecho{
background-color: #FFCCCC;
width: 200px;
float: right;
}

#pie {
width: 800px;
clear:both;
background-color: #CC66FF;
}
</style>


</head>

<body>

<div id="pagina">

<div id="cabecera">
<p>cabecera</p>
</div>
<div id="contenido">
<div id="lateral_izquierdo">
<p>lateral izquierdo</p>
</div>

<div id="cuerpo">
<p>cuerpo</p>
<p>En base a este ejemplo de lo mas simple, quiero que, cuando el div lateral_izquierdo tengas varias lineas, que los div cuerpo y lateral_derecho tengan el mismo alto que el div lateral_izquierdo.
Cuando el div cuerpo tengas varias lineas, que los div lateral izquierdo y derecho tengan el mismo alto que el div cuerpo.
Y que cuando el div lateral derecho tenga varias lineas, los div lateral izquierdo y cuerpo tengan el mismo alto que el div lateral derecho.

Bueno, pues esto, desde de varios dias, no soy capaz de conseguirlo.

A ver si me podeis ayudar, por favor. Muchas Gracias.
</p>
</div>

<div id="lateral_derecho">
<p>lateral derecho</p>
</div>
</div>
<div id="pie">
<p>pie</p>
</div>

</div>

</body>
</html>
  #11 (permalink)  
Antiguo 12/04/2010, 18:20
 
Fecha de Ingreso: octubre-2007
Ubicación: en las nubes!
Mensajes: 44
Antigüedad: 16 años, 6 meses
Puntos: 0
Respuesta: Que los div lleguen hasta el final

Intenta este codigo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style>
body {
text-align:center;

}

#pagina{
width: 800px;
margin: 0 auto;
height: 100%;


}

#cabecera {
width: 800px;
background-color: #009900;}

#contenido{
overflow:hidden;
background-image:url(contenido.gif);
background-repeat: repeat-y;
height:400px;

}

#lateral_izquierdo{
float: left;
width: 200px;
background-color:#cc99cc;
height:100%;

}

#cuerpo{
background-color: #990033;
width: 400px;
float: left;
height:100%;

}

#lateral_derecho{
background-color: #FFCCCC;
width: 200px;
float: right;
height:100%;
}

#pie {
width: 800px;
clear:both;
background-color: #CC66FF;
}
</style>


</head>

<body>

<div id="pagina">

<div id="cabecera">
<p>cabecera</p>
</div>


<div id="contenido">
<div id="lateral_izquierdo">
<p>lateral izquierdo</p>
</div>

<div id="cuerpo">
<p>cuerpo</p>
<p>En base a este ejemplo de lo mas simple, quiero que, cuando el div lateral_izquierdo tengas varias lineas, que los div cuerpo y lateral_derecho tengan el mismo alto que el div lateral_izquierdo.
Cuando el div cuerpo tengas varias lineas, que los div lateral izquierdo y derecho tengan el mismo alto que el div cuerpo.
Y que cuando el div lateral derecho tenga varias lineas, los div lateral izquierdo y cuerpo tengan el mismo alto que el div lateral derecho.

Bueno, pues esto, desde de varios dias, no soy capaz de conseguirlo.

A ver si me podeis ayudar, por favor. Muchas Gracias.
</p>
</div>

<div id="lateral_derecho">
<p>lateral derecho</p>
</div>
</div>
<div id="pie">
<p>pie</p>
</div>

</div>

</body>
</html>


Lo que hice fue darle un alto determinado al contenido de 400px, y las tres columnas de adentro tienen un alto de 100%. me cuentas.

saludos.
  #12 (permalink)  
Antiguo 13/04/2010, 00:20
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: Que los div lleguen hasta el final

Hola y gracias por tu respuesta.

No es exactamente lo que que quería, ya que cuando alguno de los div tengan mucho contenido, ese contenido no se verá.

En cualquier caso, creo que voy a tener que hacer algo parecido a lo que indicas, ya que llevo varias dias consultando la web (incluido este hilo) y de momento no veo como se puede hacer.

Un saludo.
  #13 (permalink)  
Antiguo 13/04/2010, 01:09
 
Fecha de Ingreso: octubre-2007
Ubicación: en las nubes!
Mensajes: 44
Antigüedad: 16 años, 6 meses
Puntos: 0
Respuesta: Que los div lleguen hasta el final

Pues compañero, mientras encuentras algo puedes usar tables :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style>
body {
text-align:center;

}

#pagina{
width: 800px;
margin: 0 auto;
height: 100%;


}

#cabecera {
width: 800px;
background-color: #009900;}

.contenido{
overflow:hidden;
background-image:url(contenido.gif);
background-repeat: repeat-y;
height: 100%;
width:800px;

}

.lateral_izquierdo{
width: 200px;
background-color:#cc99cc;
height:100%;

}

.cuerpo{
background-color: #990033;
width: 400px;
height:100%;

}

.lateral_derecho{
background-color: #FFCCCC;
width: 200px;
height:100%;
}

#pie {
width: 800px;
clear:both;
background-color: #CC66FF;
}
</style>


</head>

<body>

<div id="cabecera">
<p>cabecera</p>
</div>

<table class="contenido">
<tr></tr>
<tr><td class="lateral_izquierdo">Lateral Izquierdo</td>
<td class="cuerpo"><p>cuerpo</p>
<p>En base a este ejemplo de lo mas simple, quiero que, cuando el div lateral_izquierdo tengas varias lineas, que los div cuerpo y lateral_derecho tengan el mismo alto que el div lateral_izquierdo.
Cuando el div cuerpo tengas varias lineas, que los div lateral izquierdo y derecho tengan el mismo alto que el div cuerpo.
Y que cuando el div lateral derecho tenga varias lineas, los div lateral izquierdo y cuerpo tengan el mismo alto que el div lateral derecho.

Bueno, pues esto, desde de varios dias, no soy capaz de conseguirlo.

A ver si me podeis ayudar, por favor. Muchas Gracias.
</p></td>
<td class="lateral_derecho">Lateral Derecho </td>
</tr>

</table>

<div id="pie">
<p>pie</p>
</div>
</body>
</html>

No creo que sea lo mejor pero puede servir y se ajusta de acuerdo a la de mayor contenido, me cuentas a ver que mas podemos hacer.

Saludos

Última edición por nxt89; 13/04/2010 a las 01:15
  #14 (permalink)  
Antiguo 13/04/2010, 01:10
 
Fecha de Ingreso: octubre-2007
Ubicación: en las nubes!
Mensajes: 44
Antigüedad: 16 años, 6 meses
Puntos: 0
Respuesta: Que los div lleguen hasta el final

Investiga bien las propiedades overflow y de pronto combinalas con los height al 100%, o algo asi por el estilo.

Saludos
  #15 (permalink)  
Antiguo 16/04/2010, 00:23
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 10 meses
Puntos: 6
Respuesta: Que los div lleguen hasta el final

Hola amigos:

El ejemplo de las tablas si funciona como quiero mas o menos, pero como bien ha dicho su autor, "no creo que sea lo mejor pero puede servir".

De todas formas, me sigue sorprendiendo que algo que funciona en paginas muy conocidas (prensa, etc) como los div llegan hasta el final con su color tenga contenido o no, porque es algo tan dificil.

En cualquier caso, agradeceros a todos vuestra ayuda, habeis sido muy amables.

Un saludo.

Etiquetas: final
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 05:55.