要垂直填充第二个div,可以使用CSS中的flexbox布局或者grid布局来实现。下面是两种常见的方法:
- 使用flexbox布局:
- 首先,将两个div包裹在一个父容器中,设置父容器的display属性为flex。
- 然后,设置父容器的flex-direction属性为column,使子元素垂直排列。
- 接着,将第一个div的高度设置为0,使其不占据空间。
- 最后,将第二个div的flex属性设置为1,使其自动填充剩余空间。
- 示例代码如下:
- 示例代码如下:
- 示例代码如下:
- 使用grid布局:
- 首先,将两个div包裹在一个父容器中,设置父容器的display属性为grid。
- 然后,设置父容器的grid-template-rows属性,将第一个div的高度设置为0,将第二个div的高度设置为1fr,表示自动填充剩余空间。
- 示例代码如下:
- 示例代码如下:
- 示例代码如下:
以上两种方法都可以实现垂直填充第二个div,具体选择哪种方法取决于实际需求和布局结构。