Foros del Web » Creando para Internet » CSS »

Height ajustable sin tablas

Estas en el tema de Height ajustable sin tablas en el foro de CSS en Foros del Web. Hola a [email protected], estoy tratando de tener un height auto-ajustable, pero sin usar tablas (ni tablas css). Lo que quiero es que fila1 mida 20px ...
  #1 (permalink)  
Antiguo 04/01/2014, 05:54
 
Fecha de Ingreso: enero-2012
Mensajes: 20
Antigüedad: 11 años
Puntos: 0
Height ajustable sin tablas

Hola a [email protected], estoy tratando de tener un height auto-ajustable, pero sin usar tablas (ni tablas css).

Lo que quiero es que fila1 mida 20px de alto (height) y que fila2 mida el resto del espacio libre de #capa.

Código:
<html>
<head>
	<style type="text/css">
		#capa {
			width: 200px;
			height: 100px;
			background-color: red;
		}

		.fila1 {
			height: 20px;
			background-color: orange;
		}

		.fila2 {
			height: auto;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="capa">
		<div class="fila1">a</div>
		<div class="fila2">b</div>
	</div>
</body>
</html>
PD: El tamaño de #capa no es fijo, varia usando jquery ui.

Saludos y gracias
  #2 (permalink)  
Antiguo 04/01/2014, 06:55
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 9 años, 8 meses
Puntos: 31
Respuesta: Height ajustable sin tablas

Usando calc lo puedes solucionar.
Código CSS:
Ver original
  1. .fila2 {
  2.             height: calc(100% - 20px);
  3. ...
  4. }
  #3 (permalink)  
Antiguo 04/01/2014, 10:41
 
Fecha de Ingreso: enero-2012
Mensajes: 20
Antigüedad: 11 años
Puntos: 0
Respuesta: Height ajustable sin tablas

Si, conozco calc, el problema es que el navegador opera no suporta calc

Otra opción es usar JS para calcula el tamaño. Igualmente espero a ver si alguien puede ayudarme.

Saludos
  #4 (permalink)  
Antiguo 04/01/2014, 12:02
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 9 años, 8 meses
Puntos: 31
Respuesta: Height ajustable sin tablas

Opera ya soporta calc, serán las versiones antiguas. http://caniuse.com/#feat=calc
  #5 (permalink)  
Antiguo 04/01/2014, 12:11
Avatar de Contac  
Fecha de Ingreso: enero-2014
Mensajes: 86
Antigüedad: 9 años
Puntos: 8
Respuesta: Height ajustable sin tablas

Hola para que fila2 mida el resto del espacio libre de #capa
Código HTML:
Ver original
  1. .fila2 {
  2.             height: 100%;
  3.             background-color: green;
  4.         }
  #6 (permalink)  
Antiguo 04/01/2014, 12:18
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 9 años, 8 meses
Puntos: 31
Respuesta: Height ajustable sin tablas

Cita:
Iniciado por Contac Ver Mensaje
Hola para que fila2 mida el resto del espacio libre de #capa
Código HTML:
Ver original
  1. .fila2 {
  2.             height: 100%;
  3.             background-color: green;
  4.         }
Asi mide el tamaño del padre sin más, por lo tanto se saldría del elemento padre. Solo lo puedes parchear malamente con overflow:hidden
  #7 (permalink)  
Antiguo 05/01/2014, 11:57
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 11 años, 10 meses
Puntos: 116
Respuesta: Height ajustable sin tablas

o posicion absolute a fila2, y un margin.-top de 20px al contenido que tendra dentro, para que no quede atras de fila1, y simule que el contenido empieza 20px abajo.
__________________
Programador jQuery & PHP

Etiquetas: ajustable, background, color, height, html, tablas, tamaño
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:25.