HTML 将 div 置于屏幕底部，而非页面底部

在本文中，我们将介绍如何使用HTML将一个div标签置于屏幕底部，而不是页面底部。通过学习下面的示例和解释，您将能够灵活地控制页面的布局，实现所需效果。

阅读更多：HTML 教程

HTML 基本结构

在开始之前，我们需要了解一下HTML的基本结构，以便理解如何将div标签置于屏幕底部。HTML是一种标记语言，用于构建网页布局和结构。一个基本的HTML文档由<html>、<head>和<body>三个主要标签组成。

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 在这里添加内容 -->
</body>
</html>

以上是一个最简单的HTML文档结构，现在让我们进一步学习如何将div标签置于屏幕底部。

使用 CSS 将 div 置于底部

要将div标签置于屏幕底部，我们需要使用CSS样式来控制元素的位置和布局。CSS是一种用于定义网页样式的语言。我们可以使用position属性和bottom属性来实现这一目标。

考虑下面的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>将 div 置于屏幕底部</title>
</head>
<body>
    <div class="container">
        <p>这是一个示例文本。</p>
    </div>
</body>
</html>

在上面的代码中，我们有一个<div>标签，其中包含一个段落。

接下来，我们将在<head>标签内添加一个<style>标签，并在其中编写CSS样式。

<!DOCTYPE html>
<html>
<head>
    <title>将 div 置于屏幕底部</title>
    <style>
        .container {
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个示例文本。</p>
    </div>
</body>
</html>

在上面的代码中，我们使用了.container选择器来选择<div>标签，并使用position: absolute;和bottom: 0;来将其置于屏幕底部。

辅助定位技巧

除了使用CSS的position和bottom属性，还有其他一些辅助定位技巧可以帮助我们将div标签置于屏幕底部。下面列出了其中的两个示例。

使用 flexbox 布局

Flexbox是一种用于页面布局的弹性盒子模型。使用Flexbox，我们可以轻松地将div标签置于页面底部。考虑下面的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>使用 Flexbox 将 div 置于屏幕底部</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .container {
            margin-top: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个示例文本。</p>
    </div>
</body>
</html>

在上面的代码中，我们将<body>标签的display属性设置为flex，并将flex-direction属性设置为column，以使其成为纵向排列的弹性盒子。然后，我们使用margin-top: auto;将<div>标签置于底部。

使用 CSS Grid 布局

CSS Grid是一种用于网页布局的二维网格系统。通过使用CSS Grid，我们可以将div标签置于屏幕底部。考虑下面的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>使用 CSS Grid 将 div 置于屏幕底部</title>
    <style>
        body {
            display: grid;
            grid-template-rows: 1fr auto;
            min-height: 100vh;
        }
        .container {
            grid-row: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个示例文本。</p>
    </div>
</body>
</html>

在上面的代码中，我们将<body>标签的display属性设置为grid，并使用grid-template-rows: 1fr auto;将页面划分为两个行，其中第一行将占用剩余的所有空间，第二行将根据内容自动调整高度。然后，我们使用grid-row: 2;将<div>标签置于第二行。