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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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.
Curso de Frontend Developer
