[分享]css两个元素垂直铺满

在实际的布局中，我们常常会碰到两个元素需要垂直铺满的情况。这时候，我们可以通过CSS来实现，下面就是一段简单的代码示例：.container { height: 100; display: flex;...

在实际的布局中，我们常常会碰到两个元素需要垂直铺满的情况。这时候，我们可以通过CSS来实现，下面就是一段简单的代码示例：

.container {
    height: 100%;
    display: flex;       /* 容器使用Flex布局 */
    flex-direction: column;   /* 列布局，方向为垂直 */
}

.item1 {
    flex: 1;    /* 占据剩余空间 */
}

.item2 {
    height: 100%;    /* 高度为100% */
} 

以上代码中，我们定义了一个容器容器container，它的高度为100%，接着我们使用Flex布局，并设置方向为垂直，这样就能确保容器里的元素垂直排列。接着我们给item1设置flex:1，它会占据容器中剩余的空间，从而使得item2能够垂直铺满整个容器。

当然，以上代码只是实现的基本思路，如果我们需要实现更加复杂的布局，还需要再进行一些小调整，具体的实现方法建议读者自己尝试修改代码。总体来说，CSS的强大之处在于它可以通过简单的代码实现各种各样的布局，并且不需要依赖js等其他的技术。