Foros del Web » Programando para Internet » Javascript »

columnas iguales con js

Estas en el tema de columnas iguales con js en el foro de Javascript en Foros del Web. bien llevo dias viendo formas de hacer columnas iguales.. sobre todo en css sin encontrar una solución que me vaya bien he decidido pasar al ...
  #1 (permalink)  
Antiguo 21/09/2011, 07:09
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 3 meses
Puntos: 0
columnas iguales con js

bien llevo dias viendo formas de hacer columnas iguales.. sobre todo en css sin encontrar una solución que me vaya bien he decidido pasar al js...

y he hecho algo parecido a esto:
básicamente lo que hago es comparar una columna lateral con el contenido y si el contenido és más grande asignarle el mismo tamaño a los laterales.. no acaba de furrular y el contenedor tampoco crece si le sobrepasa el contenido.

Código:
<html>
	<head>
	<link rel="stylesheet" href="haha.css" type="text/css">
	<script language="javascript">
	<!--
	function columnas()
		{
		columna1=document.getElementById("izq").offsetHeight;
		columna2=document.getElementById("contenido").offsetHeight;

		if(columna1<columna2)
				{
				document.getElementById("izq").style.height=columna2;
				document.getElementById("der").style.height=columna2;
				}
		}
	//-->
	</script>
	</head>

	<body onload="columnas()">
	<div id="contenedor">
		<div id="izq">
		</div>
		<div id="contenido">
		jejeje<br><br><br><br><br><br>ajejaejea<br><br><br><br><br>jaoefjaeofjaeof<br><br><br><br><br><br><br><br>ajejaejea<br><br><br><br><br>jaoefjaeofjaeof<br><br><br><br><br><br><br><br>ajejaejea<br><br><br><br><br>jaoefjaeofjaeof<br><br>
		</div>
		<div id="der">
		</div>
	</div>

	</body>

</html>

os dejo el css también:

Código:
#izq 
	{
	width:10%;
	height:1000px;
	border: 1px solid black;
	float: left;
	
	
	}
#contenido {
	width: 70%;
	height:100%;
	border: 1px solid black;
	float:left;
	
	}
#der {
	width:10%;
	height: 100%;
	border: 1px solid black;
	float:left;
	
	}
#contenedor {
	width:100%;
	height:100%;
	text-align: center;
	border:1px solid black;
	}
bueno acepto cualquier tipo de ayuda ya sea css, js, o lo que sea pero en css la verdad las soluciones que he visto a parte de que no he conseguido que funcione ninguna no me acaban de gustar porqué no las puedo adaptar como quiero.
  #2 (permalink)  
Antiguo 21/09/2011, 08:05
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: columnas iguales con js

bueno he realizao unos cambios al código y más o menos funciona.. tengo un pequeño problema y es que los laterales quedan un pelo más grandes que el contenido.. lo he solucionado con esto:

Código:
if(columna1<columna2)
				{
				document.getElementById("izq").style.height=columna2-2;
				document.getElementById("der").style.height=columna2-2;
				}
en principio funciona el código final quedaria asi..

Código:
<html>
	<head>
	<link rel="stylesheet" href="haha.css" type="text/css">
	<script language="javascript">
	<!--
	function columnas()
		{
		columna1=document.getElementById("izq").offsetHeight;
		columna2=document.getElementById("contenido").offsetHeight;

		if(columna1<columna2)
				{
				document.getElementById("izq").style.height=columna2-2;
				document.getElementById("der").style.height=columna2-2;
				}
		}
	//-->
	</script>
	</head>

	<body onload="columnas()">
	<div id="contenedor">
		<div id="izq">
		</div>
		<div id="contenido">
		jejeje<br><br><br><br><br><br>ajejaejea<br><br><br><br><br>jaoefjaeofjaeof<br><br><br><br><br><br><br><br>ajejaejea<br><br><br><br><br>jaoefjaeofjaeof<br><br><br><br><br><br><br><br>ajejaejea<br><br><br><br><br>jaoefjaeofjaeol<br><br><br><br><br><br>jeje<br><br>
		</div>
		<div id="der">
		</div>
	</div>

	</body>

</html>
Código:
* { margin: 0;
	padding:0;
	}
#izq 
	{
	width:9%;
	height:20px;
	border: 1px solid black;
	float: left;
	
	
	}
#contenido {
	width: 80%;
	height:auto;
	border: 1px solid black;
	float:left;
	
	}
#der {
	width:10%;
	height: 100%;
	border: 1px solid black;
	float:left;
	
	}
#contenedor {
	width:100%;
	height:auto;
	}

#body { text-align:center; margin:auto;}
acepto criticas, ideas, animales de compañia y todo lo que os ocurra.. un saludo
  #3 (permalink)  
Antiguo 21/09/2011, 09:04
Avatar de Franz1628  
Fecha de Ingreso: marzo-2007
Ubicación: Lima - Perú
Mensajes: 145
Antigüedad: 17 años, 1 mes
Puntos: 26
Respuesta: columnas iguales con js

Hola mira esto puede ayudarte

http://www.librosweb.es/css_avanzado/capitulo1/elementos_de_la_misma_altura.html
__________________
En mi Blog puedes ver articulos javascript y más...
@Franz1628
  #4 (permalink)  
Antiguo 21/09/2011, 14:41
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: columnas iguales con js

Hace poco puse un enlace a este tema

acerca de dos div

También se pueden usar columnas, pero depende del caso.

http://www.quirksmode.org/css/multicolumn.html

Etiquetas: columnas, funcion, html, iguales, js
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 15:35.