Se puede hacer que un div secundario dentro de un contenedor tome el ancho y el alto completos del div principal. Hay dos métodos para estirar el div para que se ajuste al contenedor usando CSS tat que se analizan a continuación:
Método 1: el primer método es simplemente asignar 100 % de ancho y 100 % de alto al div secundario para que ocupe todo el espacio disponible del div principal.
Considere este HTML para demostración:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
height: 400px;
background-color: green;
}
.num1 {
background-color: yellow;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="num1">
Welcome to GFG.
</div>
</div>
</body>
</html>
Producción:
Método 2: podemos hacer que el atributo de visualización del contenedor secundario se muestre en la fila de la tabla y el atributo de visualización del contenedor principal en la tabla , que tomará toda la altura disponible del elemento div principal. Para cubrir todo el ancho, podemos hacer que el ancho del div principal sea del 100 %.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
height: 200px;
background-color: green;
display: table;
width: 100%;
}
.num1 {
background-color: greenyellow;
display: table-row;
}
</style>
</head>
<body>
<div class="container">
<div class="num1">
Welcome to GFG.
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por wanna_code y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA