CSS 容器的100%高度与最小高度

在本文中，我们将介绍如何在CSS中设置容器的高度为100%并且具有最小高度。

阅读更多：CSS 教程

问题描述

在Web开发中，我们经常会遇到一个问题：如何设置一个容器的高度为100%，但同时也要保证容器具有最小高度。这是因为在某些页面布局中，我们希望容器能够自适应其内容的高度，但又不能小于一定的高度。CSS中提供了一些解决方案来解决这个问题。

解决方案

方法1：使用calc()函数

我们可以使用calc()函数来计算容器的高度。calc()函数允许我们在计算样式属性的值时使用数学表达式。通过使用calc()函数，我们可以将容器的高度设置为浏览器窗口的高度减去最小高度，并将其设置为100%。

.container {
  height: calc(100% - 200px);
  min-height: 200px;
}

上述代码中，我们将容器的高度设置为浏览器窗口高度的100%，并且将最小高度设置为200px。这样，当容器的内容超过200px时，容器会根据内容的实际高度进行扩展。如果内容不足200px，则容器的高度仍然为200px。

方法2：使用Flexbox布局

另一种解决方案是使用Flexbox布局。Flexbox布局（弹性布局）是一种常用于页面布局的CSS3功能。它可以在父容器和子容器之间创建灵活的，动态的布局。

.container {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.content {
  flex: 1;
}

上述代码中，我们将容器设置为Flexbox布局，并将其最小高度设置为200px。接下来，我们将内容区域（.content）的flex属性设置为1。这样，内容区域将会自动填充剩余空间，并将容器的高度设置为100%。

方法3：使用Grid布局

如果你更喜欢使用Grid布局，也可以使用它来解决这个问题。Grid布局是CSS3中引入的另一个强大的页面布局功能。

.container {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 200px;
}

.content {
  grid-row: 1;
}

上述代码中，我们首先将容器设置为Grid布局，并将其最小高度设置为200px。然后，我们使用grid-row属性将内容区域（.content）放置在第一行。这样，内容区域将会自动填充剩余空间，并将容器的高度设置为100%。

示例

下面是一个示例，演示了如何在CSS中设置容器的高度为100%并且具有最小高度。你可以尝试调整浏览器窗口的大小来查看效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      height: calc(100% - 200px);
      min-height: 200px;
      background-color: lightblue;
    }

    .content {
      background-color: lightgreen;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar magna non velit posuere, quis facilisis ligula blandit. Nulla vel ullamcorper nisi.
    </div>
  </div>
</body>
</html>