Foros del Web » Creando para Internet » HTML »

Crear cajas con un height máximo

Estas en el tema de Crear cajas con un height máximo en el foro de HTML en Foros del Web. Hola, escribo porque llevo varias horas investigando y rompiendome la cabeza para intentar hacer que un bloque o una caja tenga un height máximo, de ...
  #1 (permalink)  
Antiguo 14/03/2005, 13:03
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
Crear cajas con un height máximo

Hola, escribo porque llevo varias horas investigando y rompiendome la cabeza para intentar hacer que un bloque o una caja tenga un height máximo, de manera de que cuando un texto generado dinámicamente alcance este "height máximo" salga un scroll a la izquierda y se pueda visualizar completo sin que la caja se estire demasiado... se que para hacer lo del scroll solo tengo ke ponerle: " overflow: auto; " pero si no le coloco un height especifico, la caja se va a estirar hasta ke salga todo el texto, y si le coloco un height de por ejemplo 500px, cuando escriba un texto que no alcance esos 500px me va a dejar un espacio vacio que se ve muy mal...

Para que se entienda mejor, es algo como esto:
Código PHP:
aaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
a
a
a
a
aa
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a

Aqui podemos ver que la caja se agranda hasta un tamaño máximo y luego sale un scroll a la izquierda.

Código PHP:
aaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa 
Aqui, como lo escrito no llena totalmente el tamaño, sale simplemente la caja del tamaño necesario sin ocupar ni mas ni menos.

Como puedo hacer esto??
Gracias :)
__________________
In a world without walls, who needs Windows?
  #2 (permalink)  
Antiguo 14/03/2005, 13:27
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Volrath

Si te refieres a un textarea, con esto debería funcionarte:

<textarea style="width:100px;height:100px;overflow:auto">aa</textarea>

Los tamaños solo son de ejemplo. Si pones pones poco texto no sale ninguna barra.

Espero que te sirva. Saludos,
  #3 (permalink)  
Antiguo 14/03/2005, 15:13
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Si te referis a un DIV usando IE creo que no hay mucho que puedas hacer. Quizás JS pero es otro tema :).
  #4 (permalink)  
Antiguo 14/03/2005, 20:05
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Volrath... para hacer lo que quieres necesitas darle un overflow:auto y un max-height:50px (ejemplo)

De esa forma la caja se irá alargando a medida que le ingresas texto, hasta que llegue a los 50px de alto, de ahi en adelante mostrará el scroll.

El problema de esto es que requiere CSS2 (en Firefox y Opera funciona bien).

No se si habrá otra propiedad en CSS1 que permita lo mismo para IE, pero te serviría jugar con javascript y los comentarios condicionales.

Acá te copio un ejemplo:

Código:
<html>
<head>

<style type="text/css">
#caja{
border:1px solid black;
width:100px;
max-height:50px;
overflow:auto;
}
</style>

<script type="text/javascript">
function medidascaja(id){
    //calculo la altura actual de la caja
    var elemento = document.getElementById(id).offsetHeight;
    //si es mayor a 50, le aplico css para dejar su altura en 50
    if(elemento > 50){
        document.getElementById(id).style.height = '50';
    }
}
</script>

<!--[if IE]>
<script type="text/javascript">
#Como estoy usando un comentario condicional esto solo lo verá internet explorer
window.onload = function(){
    medidascaja('caja');
}
</script>
<![endif]-->

</head>
<body>
<div id="caja">
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg
</div>
</body>
</html>
__________________
El conocimiento es libre: Movimiento por la Devolución

Última edición por frijolerou; 14/03/2005 a las 20:21
  #5 (permalink)  
Antiguo 15/03/2005, 02:15
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
pero si el overflow funciona perfectamente en IE sin necesidad de JS!

chequen este ejemplo:
http://monolinea.com/curri_exp.htm

funciona tanto en ie como en opera, firefox, etc.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #6 (permalink)  
Antiguo 15/03/2005, 02:57
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
Tenes razón! Tonto de mí que lo vengo haciendo con width y no me acordaba.
A menos que lo que quiera Volrath es que si el texto ocupa menos de 50px, entonces el bloque ocupe lo máximo necesario. En ese caso el ejemplo de Kemie no funcionaría, porque height funciona como un min-height.
  #7 (permalink)  
Antiguo 15/03/2005, 14:24
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
Hola!, Lo del max-height sirvió muy bien, pero tenias razon Remo:Erdosain, la cosa como que no agarra en IE, no por el overflow, sino por el max-height. El overflow funciona bien en ambos exploradores, pero el max-height solo se ve bien en FireFox...

Intente con el JS que colocaste, pero no me sirvio, lo agarre y lo copie tal cual en una nueva página, y no me sirvió =S... el internet explorer sigue mostrandome toda la caja, sin reducir el height , nose si estaré haciendo algo mal...
__________________
In a world without walls, who needs Windows?
  #8 (permalink)  
Antiguo 15/03/2005, 14:40
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Como pusiste el codigo?
__________________
El conocimiento es libre: Movimiento por la Devolución
  #9 (permalink)  
Antiguo 15/03/2005, 14:44
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
Hola, bueno, pués lo puse exactamente igual, lo copié y lo pegue del ejemplo que me diste... el max-height lo agarra perfecto el Firefox, pero nisiquiera con el JS funciona bien el IE ...
__________________
In a world without walls, who needs Windows?
  #10 (permalink)  
Antiguo 15/03/2005, 18:49
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
mmm pues como casi siempre, uno nunca mira las cosas mas sencillas :P... faltó solo colocarle 'px' a los valores del height en la funcion de JS y ya, funciona perfectamente! :P gracias!
__________________
In a world without walls, who needs Windows?
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 22:08.