css布局高度自适应 |css 多个class

.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 0 0 auto;
}
.main {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}

当大家想要实现网站页面中的布局时，最常见的一种方法就是使用一个包裹元素（通常是一个div），然后在这个元素中创建不同的部分，如头部、主体和底部。

现在，大家使用CSS的flexbox布局可以很容易地实现高度自适应布局。首先，大家需要将包裹元素的display属性设置为flex。然后，将flex-direction设置为column，这使得所有子元素按垂直顺序排列。

现在，大家需要确保主体部分（如文章列表，内容等）可以自适应其父元素的高度。大家可以通过将主体部分的flex属性设置为1来实现。这将使主体部分充满其父元素（其中父元素的高度是通过min-height属性设置的，以确保视窗高度较小时也可以正常工作）的剩余高度。

同样，大家可以将页眉和页脚部分的flex属性设置为0，以确保它们只占据它们需要的空间。完整的CSS代码如上所示。

在实现高度自适应布局时，还有一些其他的方法，例如使用overflow属性和绝对/固定定位。但是，通过使用flexbox布局，大家可以确保可维护性和可扩展性，使得页面虽然不同，但是布局的实现方式都可以很容易地重用。