Cómo ajustar el tamaño de un objeto para ocupar el 100% de su contenedor.

4889

Hola! Seguro, como yo, te planteaste en algún momento cómo hacer que un objeto ocupe todo el espacio de su contenedor. Bien sea para practicar algo visto en clase o para alguna funcionalidad de tu proyecto. Empecemos!

Paso 1
Asumiendo que posees VSCode, abre tu editor y crea un html con el nombre que desees. Para mayor agilidad escribe en la primera línea html:5 y el editor desplegará una mini ventana de opciones de autocompletado. Elige html:5 y te creará la base del documento.

Paso 2
Crea 1 etiqueta div padre, dentro, una etiqueta p con el texto que desees.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><div><p>Hola Mundo!</p></div></div></body></html>

Paso 3
Le damos estilos a través de la etiqueta style en el head del html. Definimos un fondo de color al div y al p para diferenciarlos y asignamos dimensiones a la etiqueta div.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{
            background-color: yellow;
            width: 600px;
            height: 600px;
        }
        p{
            background-color: royalblue;
        }
    </style></head><body><div><div><p>Hola Mundo!</p></div></div></body></html>

Ahí podremos observar un cuadrado que representa la etiqueta div, dentro, la etiqueta p ocupando solo una parte del alto de su contenedor.

Paso 4
Ahora asignamos una altura a la etiqueta p definiéndola de esta forma: ‘height: 100%;’ . Esto quiere decir que el espacio de altura que ocupará la etiqueta será el 100% de la altura de su contenedor.

<style>div{
            background-color: yellow;
            width: 600px;
            height: 600px;
        }
        p{
            background-color: royalblue;
            height: 100%;
        }
    </style>```

Ahora, observaremos que la etiqueta p ocupa toda la altura de su contenedor ya que el color de fondo de la etiqueta p cubre por completo la etiqueta div.

Y Listo! Ahora sabes cómo dimensionar un objeto para ocupar el 100% de su contenedor! Espero haberte sido de ayuda! Deja tu feedback, estaré atento.