CSS: Height de un div que ocupa el máximo del div padre

Buenas a todos,

Llevaba ya tiempo sin escribir nada sobre CSS, será porque no me ha tocado maquetar, hasta hace unos días. Hoy quiero contar como hacer que un div hijo ocupe el 100% del height del div padre independientemente del tamaño que tenga éste. Esto lo podemos utilizar por ejemplo en un sidebar dentro de una página web donde el height del padre irá cambiando en función del contenido de éste.

Vamos a ver el código de cómo podríamos hacerlo y después veremos el resultado con algunos ejemplos.

.parent{
   width:100%;
   min-height:20em;
   float:left;
   position:relative;
   overflow:hidden:
}

.child{
   width:30%;
   position:absolute;
   top:0;
   bottom:0;
}

Aquí hay dos claves para entender como funciona. Por un lado, el uso, como ya mostré en un post anterior de la propiedad position. Y por otro lado e igual de importante, el uso de las propiedades en el hijo top y bottom, con el valor 0. Esto hará que el hijo se ajuste en todo momento tanto al top como al bottom del padre, consiguiendo el efecto deseado. Vamos a ver el funcionamiento del ejemplo.

prueba
prueba

Como se puede ver, independientemente del height del padre, el hijo ocupa siempre el 100% de éste.

Os dejo un par de enlaces de interés, una la explicación del uso de la propiedad position en CSS y el blog donde pude investigar cómo hacer lo que os he contado.

Uso de la propiedad position en CSS

http://blog.iguazoft.com/divs-con-alto-al-100-sin-asignarle-100-al-elemento-padre/

Anuncios

Usando unidades relativas en font-size

Hola a todos, hoy quería escribir brevemente sobre cómo usar en css las unidades relativas para el tamaño de las fuentes por medio de la propiedad font-size. Concretamente sobre el uso de % y la unidad em, así como la menos conocida rem, que a mi particularmente me gusta mucho.

Si queréis acceder a toda la información sobre este tema, podéis hacerlo en el siguiente enlace:

http://www.w3.org/TR/css3-values/#absolute-lengths

La diferencia principal a la hora de usar em y % o rem, radica en lo siguiente. Tanto em como % dependen del valor utilizado en sus ancestros que tengan computada o establecida la propiedad. Es decir, se basa en sus antecesores para calcular su valor. Sin embargo, rem, siempre calcula su valor con respecto al tamaño de texto definido en la raíz.

Vamos a ver un ejemplo para entender el funcionamiento:

<div id="parent" style="font-size:0.9em;">
    <p id="child" style="font-size:0.9em;">
       Esta es la prueba
    </p>
</div>
<div id="parent">
    <p id="child" style="font-size:0.9em;">
       Esta es la prueba
    </p>
</div>

Y esto que vemos a continuación, es el comportamiento que tendría este código.

Esta es la prueba

Esta es la prueba

Se puede ver como en el primer div, el tamaño del texto en el interior de la etiqueta p es menor, ya que, el cálculo se realiza usando em y como decíamos se realiza teniendo en cuenta el tamaño definido para sus ancestros y en este caso, éste se ha establecido ya a 0.9em. Lo mismo ocurriría si hubiésemos utilizado %.

Vamos a ver ahora otro ejemplo usando la propiedad rem

<div id="parent" style="font-size:0.9rem;">
    <p id="child" style="font-size:0.9rem;">
       Esta es la prueba
    </p>
</div>
<div id="parent">
    <p id="child" style="font-size:0.9rem;">
       Esta es la prueba
    </p>
</div>

Y ahora vamos a ver el resultado de usar este ejemplo:

Esta es la prueba

Esta es la prueba

En este caso observamos como el tamaño siempre es el mismo. A diferencia del caso anterior, en que el tamaño variaba en función de definir un propiedad font-size en sus antecesores o no, ahora la referencia será siempre el tamaño de texto definido en la raíz.

Espero que os sea de utilidad a la hora de trabajar con la propiedad font-size. Yo normalmente utilizo rem, porque me resulta más cómodo y se ajusta más al funcionamiento que quiero conseguir, además de no tener que estar pendiente del tamaño definido en las etiquetas previas.

Otro enlace donde explican todo esto en profundidad y que me ha servido para entender mejor el concepto.

http://ksesocss.blogspot.com/2012/05/font-size-las-unidades-y-su-uso-o-no-em.html

Un saludo a todos

Uso de la propiedad position en CSS

Buenas de nuevo a todos, hoy os voy a contar un aspecto del uso de esta propiedad de CSS que descubrí hace un tiempo. Seguro que muchos lo conocéis pero a otros os resultará, como a mi en su momento, interesante.

Antes de empezar voy a poneros a mostraros una captura de pantalla de lo que dice la definición de esta propiedad en la página de referencia sobre CSS.

.positionProperty

Os pongo también el enlace a la web de referencia para que podáis entrar y ver con más detalle las características de esta propiedad de CSS.

http://www.w3schools.com/cssref/pr_class_position.asp

Lo que para mi resulta importante y creo que mucha gente desconoce del uso de esta propiedad tiene que ver con el uso del valor “absolute”. Si nos fijamos en la definición, nos dice que se posiciona en relación a su primer predecesor “not static”. Yo pensaba que en el momento de usar position:absolute se posicionaba con respecto al inicio de la página. Y realmente era así porque no estaba usando correctamente esta propiedad. No siempre usando absolute se posiciona con respecto al inicio de la página. Podemos colocarlo de forma absoluta con respecto a otro elemento de nivel superior usando en dicho elemento position:relative.

Vamos a ver algunos ejemplos para ver la diferencia y como podemos usar esta propiedad.

.parent{}
.child{position:absolute;top:20%;left:20%;}
<html>
<head></head>
<body>
   <div class="parent">
      <div class="child">
      </div>
   </div>
</body>
</html>

En este caso, el div con la clase child se estaría posicionando con respecto al body de la página, ya que no hay ningún predecesor que tenga un posicionamiento que no sea “not-static”. En el siguiente ejemplo la cosa cambiará.

.parent{position:relative;}
.child{position:absolute;top:20%;left:20%;}

Ahora sobre el mismo HTML, estaríamos posicionando el elemento con la clase child de forma absoluta pero con respect al elemento con la clase parent.

Seguramente muchos pensaréis, que cosa más básica, pero al menos a mi en su momento me descubrió un mundo de posibilidades XD, y espero que a aquellos que no supieran como usarlo, también.

Hasta la próxima.