Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Overflow

Estas en el tema de Overflow en el foro de HTML en Foros del Web. Hola!! Tengo un problema y ya estoy desesperado jajajaja Tengo tres columnas. He conseguido que las tres tengan la misma altura, gracias a la propiedad ...
  #1 (permalink)  
Antiguo 25/09/2016, 16:51
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 13 años, 1 mes
Puntos: 4
Overflow

Hola!!

Tengo un problema y ya estoy desesperado jajajaja

Tengo tres columnas. He conseguido que las tres tengan la misma altura, gracias a la propiedad css "display". El problema ahora es que no me funciona ( o no sé cómo hacerlo ) el overflow. Os cuento, las tres columnas ( QUE SON DIVS ) deben ocupar la misma altura. Pero en función del contenido debe mostrar scroll el div correspondiente. Y no lo consigo! Cada div escribe todo su contenido! Y las columnas pasan a tener la altura del div con mayor contenido.

Concretamente, el div central contendrá una imagen. La altura de las tres columnas debe tener la altura de la imagen. Y los divs de izquierda y derecha mostrarán scroll, si su contenido supera la altura del div central ( la imagen ).

Os paso mi código. Veréis aquí en el div central he puesto texto largo simulando la altura que ocuparía la imagen. No soy capaz que los divs laterales saquen el croll si supera la altura de la imagen.. Si alguien sabe cómo hacerlo se lo agradeceré.

El código:

<html>

<head>


<style type="text/css">

#contenedor {
display: table;
width:80%;
background:red;


}

#contenidos {
display: table-row;
width:100%;
background:blue;

}

#columna1 {
display: table-cell;
width:25%;
background:pink;
vertical-align: top;

}

#columna11 {

width:25%;
background:magenta;
vertical-align: top;
height:100%;
overflow:auto;

}


#columna2 {
display: table-cell;
width:50%;
background:yellow;

}
#columna3 {
display: table-cell;
width:25%;
background:red;
vertical-align: top;

}

</style>
</head>

<body>



<div id="contenedor">
<div id="contenidos">
<div id="columna1">


<div id="columna11">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>

</div>

<div id="columna2">
bbLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
bbLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>


<div id="columna3">ccLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</div>
</div>
</div>

</body>
</html>


Muchísimas gracias!!!
  #2 (permalink)  
Antiguo 27/09/2016, 07:26
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 13 años, 1 mes
Puntos: 4
Respuesta: Overflow

Se soluciona con JQuery! :)

Etiquetas: overflow, text, todo
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 00:51.