在DIV内，用一个DIV 填空剩余高度

在HTML中，如果你想要在一个`<div>`内填满其父元素的剩余高度，可以使用CSS Flexbox 或者 Grid 来实现。这里有两个常见的方法：

1. **Flexbox** 方法:

   <div class="parent">
     <div class="child flex-fill">内容</div>
   </div>

在CSS里设置`.parent`为flex容器，并且`.child`应用`flex-grow: 1;`属性，这会使`.child`占据剩余的空间。

   .parent {
     display: flex;
     flex-direction: column; /* 如果想让child垂直填充 */
   }
   .child {
     flex-grow: 1;
   }

2. **Grid** 方法:

   <div class="parent grid-container">
     <div class="child grid-item">内容</div>
   </div>

设置`.parent`为grid容器，`.child`为grid项，设置`height: 100%;`使其充满高度。

   .parent {
     display: grid;
     place-items: stretch; /* 等分所有空间 */
   }
   .child {
     height: 100%;
   }