如何定位DIV以填充标题DIV和页脚DIV之间的所有可用空间？

要定位一个DIV以填充标题DIV和页脚DIV之间的所有可用空间，可以使用CSS的Flexbox布局。以下是一个简单的示例：

首先，在HTML文件中创建一个包含标题、内容和页脚的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Flexbox Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <header>
        <h1>标题</h1>
    </header>
    <main>
        <div class="content">
            <!-- 在这里添加内容 -->
        </div>
    </main>
   <footer>
        <p>页脚</p>
    </footer>
</body>
</html>

接下来，在CSS文件中使用Flexbox布局：

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #f1f1f1;
    padding: 20px;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    background-color: #ddd;
    padding: 20px;
}

footer {
    background-color: #f1f1f1;
    padding: 20px;
}

在这个示例中，我们将body的display属性设置为flex，并将flex-direction设置为column。这将使得header、main和footer按照垂直方向排列。

然后，我们将main的flex属性设置为1，这将使得main填充剩余的可用空间。我们还可以使用justify-content和align-items属性来调整内容在main中的位置。

最后，我们为header和footer设置了背景颜色和内边距，为.content设置了背景颜色、内边距和填充。

这样，我们就可以在.content中添加任何内容，它将自动填充标题和页脚之间的所有可用空间。