CSS minheight怎样适应不同屏幕

CSS的min-height属性可以用来设置元素的最小高度。为了使min-height能够适应不同屏幕，您可以使用视口单位（viewport units）或者百分比单位。以下是两种方法的示例：

1. 使用视口单位（viewport units）

视口单位是相对于浏览器窗口大小的单位，包括vw（viewport width，视口宽度的百分比）、vh（viewport height，视口高度的百分比）、vmin（viewport’s smaller dimension，视口较小尺寸的百分比）和vmax（viewport’s larger dimension，视口较大尺寸的百分比）。

示例：

html, body {
  height: 100vh; /* 设置html和body的高度为视口高度的100% */
  margin: 0; /* 移除默认边距 */
}

.container {
  min-height: 100vh; /* 设置容器的高度至少为视口高度的100% */
}

2. 使用百分比单位

百分比单位是相对于包含块（containing block）的大小来设置元素的高度。在这种情况下，您可以将min-height设置为100%，这样容器的高度就会至少与其父元素相同。

示例：

html, body {
  height: 100%; /* 设置html和body的高度为100% */
  margin: 0; /* 移除默认边距 */
}

.container {
  min-height: 100%; /* 设置容器的高度至少为父元素高度的100% */
}

请注意，这两种方法都需要将html和body元素的高度设置为100%，以确保整个页面都可以适应不同屏幕大小。