CSS grid让子元素div的高度填满父容器的剩余空间

使用CSS Grid布局同样可以实现子元素div的高度填满父容器的剩余空间。具体实现方法如下：

1. 在父容器上设置 display: grid; 使其成为一个Grid容器。

2. 在父容器上设置 grid-template-rows: 1fr auto;，其中1fr表示剩余空间的比例分配给子元素，auto表示其他子元素的高度根据内容自适应。

3. 在子元素上设置 grid-row: 1 / span 1;，使其占据第一行，且跨越1个网格。

示例代码如下：

.parent {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 500px;
}

.child {
  grid-row: 1 / span 1;
}

需要注意的是，CSS Grid布局相对于CSS Flexbox布局来说更加灵活、强大，但也更加复杂，需要更多的学习和实践。

相关问题

CSS grid让子元素div的宽度填满父容器的剩余空间

可以使用CSS网格布局中的`grid-template-columns`和`grid-template-rows`属性来实现子元素div的宽度填满父容器的剩余空间。假设父容器的宽度为1000px，其中有一个子元素div，需要填满父容器的剩余空间，则可以设置父容器的`grid-template-columns`属性值为`auto 1fr`，这样第一个列的宽度为子元素div的宽度，第二列的宽度为剩余空间的宽度，子元素div会自动填充第二列的宽度。具体的CSS代码如下：

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.child {
  /* 子元素div的样式 */
}

需要注意的是，`grid-template-columns`属性值中的`1fr`表示占据剩余空间的比例，可以根据实际情况进行调整。

如何让img高度占满父容器

为了让`<img>`元素的高度完全占据其父容器，你需要确保图片的高度是自适应的，并且不会受到其他内容的影响。有以下几种常见做法：

1. **百分比高度**:
如果父容器有明确的高度，可以给`<img>`设置`height: 100%;`。例如，如果父容器是`height: 300px;`，图片将是300像素高。

   <div class="parent" style="height: 300px;">
     <img src="..." alt="" style="height: 100%; object-fit: cover;"> <!-- object-fit: cover; 可选，保持原始比例填充 -->
   </div>

2. **使用CSS视口单位** (`vw`):
将图片高度设置为其父容器宽度的百分比，这样随着浏览器窗口大小的变化，图片会自动调整到充满整个容器高度。

   <img src="..." alt="" style="height: 100vw;">

3. **固定宽度，自适应高度** (使用`max-height`):
如果你希望图片在宽度不变的情况下填充满高度，可以使用`max-height: 100%;`和`width: auto;`:

   <img src="..." alt="" style="max-height: 100%; width: auto;">

这里假设图片的宽度已知并且不需要缩放。

4. **使用CSS Grid 或 Flexbox**:
当父容器采用这两种布局时，配合上述百分比或视口单位，也可以轻松实现自适应高度。

记住，有时候为了保持图片质量，还可以添加`object-fit` 属性，比如 `object-fit: cover;` 来保证图像按比例缩放填充容器。