CSS 设置div占满整个页面高度，减去固定高度的页眉和页脚

在本文中，我们将介绍如何使用CSS设置一个div元素占满整个页面的高度，同时减去固定高度的页眉和页脚。我们将提供多种方法和示例说明，帮助您实现此效果。

阅读更多：CSS 教程

方法一：使用绝对定位

第一种方法是使用CSS中的绝对定位。我们可以将div元素的定位设置为绝对，并将它的顶部和底部分别设置为页眉和页脚的高度。下面是一个示例代码：

body {
  margin: 0;
  padding: 0;
}

header {
  height: 50px;
  background-color: #f1f1f1;
}

footer {
  height: 50px;
  background-color: #f1f1f1;
}

div.content {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 100%;
  background-color: #fff;
}

上面的代码中，我们首先将页面的边距和内边距设置为0，以确保整个页面的高度完全占满浏览器窗口。然后，我们设置页眉和页脚的高度为50像素，并设置它们的背景色。

接下来，我们为内容区域的div元素设置绝对定位，并通过设置top和bottom属性来确保它占满整个页面的高度，同时减去页眉和页脚的高度。此外，我们还将内容区域的背景色设置为白色。

方法二：使用Flex布局

第二种方法是使用CSS中的Flex布局。Flex布局是一种强大的布局方式，可以轻松实现页面的自适应和响应式设计。下面是一个使用Flex布局的示例代码：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

header {
  height: 50px;
  background-color: #f1f1f1;
}

footer {
  height: 50px;
  background-color: #f1f1f1;
}

div.content {
  flex-grow: 1;
  background-color: #fff;
}

在上面的代码中，我们首先将body元素的display属性设置为flex，这样它的子元素将使用Flex布局。然后，我们将flex-direction属性设置为column，这样子元素将垂直排列。

接着，我们将body元素的高度设置为100vh，这样它将占满整个视口的高度。然后，我们设置页眉和页脚的高度为50像素，并设置它们的背景色。

最后，我们为内容区域的div元素设置flex-grow属性为1，这样它将填充剩余的可用空间，并将其背景色设置为白色。

方法三：使用calc()函数

第三种方法是使用CSS中的calc()函数。calc()函数可以用于执行简单的数学运算，例如减法、加法等。下面是一个使用calc()函数的示例代码：

body {
  margin: 0;
  padding: 0;
}

header {
  height: 50px;
  background-color: #f1f1f1;
}

footer {
  height: 50px;
  background-color: #f1f1f1;
}

div.content {
  height: calc(100vh - 100px);
  background-color: #fff;
}

在上面的代码中，我们依旧首先将页面的边距和内边距设置为0。然后，我们设置页眉和页脚的高度为50像素，并设置它们的背景色。

接下来，我们为内容区域的div元素设置高度，使用calc()函数将页面的视口高度(100vh)减去页眉和页脚的高度(100px)来计算。这样，div元素将占满剩余的可用空间，并将其背景色设置为白色。