css高度自适应

/* 使用min-height和max-height */
.element {
  min-height: 100px;
  max-height: 500px;
}

/* 使用flex布局 */
.container {
  display: flex;
  flex-direction: column;
}
.element {
  flex-grow: 1; /* 子元素会自适应高度 */
}

/* 使用grid布局 */
.container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 1fr表示自适应高度 */
}

/* 使用vh单位 */
.element {
  height: 50vh; /* 高度为视口高度的50% */
}

/* 使用媒体查询 */
@media (max-width: 600px) {
  .element {
    height: 300px; /* 在小屏幕上固定高度 */
  }
}

/* 使用百分比 */
.element {
  height: 50%; /* 高度为父元素高度的50% */
}

/* 使用flex布局 */
.parent {
  display: flex;
  flex-direction: column;
}
.element {
  flex-grow: 1; /* 子元素会自适应父元素的高度 */
}