css动态高度不变 |css自定义高度代码

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
height: 80px;
}
.main {
flex-grow: 1;
}

以上代码为实现CSS动态高度不变的主要方法，主要是通过设置display:flex和flex-grow:1来实现布局的动态调整。其中，.container为主要的容器，通过设置min-height:100vh来让容器的高度随着视口的变化而变化。而.header则是容器的头部，对于指定高度的元素则可通过直接设置高度来实现。而主要的内容部分则是通过设置flex-grow:1来让其自动填满剩余的空间，从而实现动态高度不变的效果。

通过以上方法，大家能够实现CSS动态高度不变的效果，达到更好的布局效果和用户体验。