如何使得div填充满整个父容器

您可以使用CSS的height和width属性来实现div填充满整个父容器的效果。以下是两种常见的方法：

1. 使用绝对定位（Absolute Positioning）：

   • 父容器需要设置position: relative;，这样子元素的绝对定位将相对于父容器进行。
   • div元素需要设置position: absolute;，并使用top: 0;、bottom: 0;、left: 0;、right: 0;来将其边界与父容器的边界对齐。
   • div元素还需要设置height和width为100%以填充满整个父容器。

   示例代码：

   <div class="parent">
     <div class="child"></div>
   </div>
   

   .parent {
     position: relative;
     height: 200px;
     width: 300px;
   }
   
   .child {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     background-color: red;
   }
   

2. 使用flex布局（Flexbox Layout）：

   • 父容器需要设置display: flex;，这样子元素将自动填充整个父容器。
   • div元素需要设置flex: 1;，这样它将占据父容器的所有可用空间。

   示例代码：

   <div class="parent">
     <div class="child"></div>
   </div>
   

   .parent {
     display: flex;
     height: 200px;
     width: 300px;
   }
   
   .child {
     flex: 1;
     background-color: red;
   }
   

这些方法都可以实现div填充满整个父容器的效果，请根据您的具体需求选择适合的方法