css 高度自适应

/* CSS 高度自适应示例代码 */

/* 方法一：使用 flexbox */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.content {
  flex-grow: 1; /* 内容区域自动填充剩余空间 */
}

/* 方法二：使用 min-height 和 max-height */
.auto-height {
  min-height: 100px; /* 设置最小高度 */
  max-height: 500px; /* 设置最大高度 */
  height: auto; /* 高度根据内容自适应 */
}

/* 方法三：使用 viewport 单位 */
.viewport-height {
  height: 80vh; /* 高度为视口高度的 80% */
}

/* 方法四：使用 calc() 函数 */
.calculated-height {
  height: calc(100vh - 100px); /* 高度为视口高度减去 100px */
}

解释说明：

1. 方法一：使用 flexbox

   • 通过 flex-grow: 1 让 .content 区域自动填充剩余的空间，使得高度可以根据内容自适应。

2. 方法二：使用 min-height 和 max-height

   • 设置元素的最小和最大高度，同时使用 height: auto 来确保高度根据内容动态调整。

3. 方法三：使用 viewport 单位

   • 使用 vh 单位设置元素的高度为视口高度的百分比，例如 80vh 表示元素高度为视口高度的 80%。

4. 方法四：使用 calc() 函数

   • 使用 calc() 函数可以进行数学运算，例如 calc(100vh - 100px) 表示元素高度为视口高度减去 100px。