高度自适应容器

高度自适应容器可以通过以下代码示例来实现：

HTML代码：

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.content {
  width: 80%; /* 设置内容宽度 */
  max-width: 800px; /* 设置内容最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

上述代码中，通过使用flex布局来实现容器的垂直居中和水平居中。将容器的高度设置为视口高度（100vh），这样容器的高度就会自适应视口的高度。内容部分使用margin属性来实现水平居中，同时设置了宽度和最大宽度，以保证内容在不同尺寸的屏幕上都能正常显示。

使用上述代码示例可以创建一个高度自适应的容器。你可以根据实际需求调整容器和内容的样式来适应不同的布局和设计。