Height ajustable sin tablas

BrunoIV · #1 (**permalink**) 04/01/2014, 05:54

Hola a tod@s, 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

alzacon · #2 (**permalink**) 04/01/2014, 06:55

Usando calc lo puedes solucionar.

Código CSS:

Ver original.fila2 {
            height: calc(100% - 20px);
...
}

BrunoIV · #3 (**permalink**) 04/01/2014, 10:41

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

alzacon · #4 (**permalink**) 04/01/2014, 12:02

Opera ya soporta calc, serán las versiones antiguas. http://caniuse.com/#feat=calc

Contac · #5 (**permalink**) 04/01/2014, 12:11

Hola para que fila2 mida el resto del espacio libre de #capa

Código HTML:

Ver original.fila2 {
            height: 100%;
            background-color: green;
        }

alzacon · #6 (**permalink**) 04/01/2014, 12:18

Cita:

Iniciado por Contac

Hola para que fila2 mida el resto del espacio libre de #capa

Código HTML:

Ver original.fila2 {
            height: 100%;
            background-color: green;
        }

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

ZoroRoronoa · #7 (**permalink**) 05/01/2014, 11:57

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.