HTML 将div固定在父元素底部

在本文中，我们将介绍如何使用HTML和CSS来实现将一个div元素固定在其父元素的底部位置。

阅读更多：HTML 教程

1. 使用CSS的position属性实现固定定位

要实现将一个div元素固定在父元素的底部，我们可以使用CSS的position属性。在CSS中，position属性有以下五个值可选：static、relative、fixed、absolute和sticky。为了将div元素固定在父元素底部，我们将position属性设置为absolute，并将bottom属性设置为0。这将使得div元素相对于其最近的非静态/没有定位的父元素底部进行定位。下面是一个示例：

<style>
    .container {
        position: relative;
        height: 300px;
        border: 1px solid black;
    }

    .sticky-div {
        position: absolute;
        bottom: 0;
        background-color: yellow;
        width: 100%;
        height: 50px;
    }
</style>

<div class="container">
    <div class="sticky-div">我是固定在底部的div</div>
</div>

在上面的示例中，我们创建了一个容器div元素和一个被固定在底部的子div元素。容器div元素的高度设置为300px，边框设置为1px的黑色实线。子div元素的position属性设置为absolute，bottom属性设置为0，这样它就会固定在容器div元素的底部。这样，无论容器div元素的高度如何变化，子div元素都会始终位于容器div元素的底部。

2. 使用display:flex将div元素固定在底部

另一种常用的方法是使用display:flex属性实现将div元素固定在底部。我们可以通过将容器div元素的display属性设置为flex，在子元素上使用margin:auto来将子div元素推到底部。以下是一个示例：

<style>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        height: 300px;
        border: 1px solid black;
    }

    .sticky-div {
        background-color: yellow;
        height: 50px;
    }
</style>

<div class="container">
    <div class="sticky-div">我是固定在底部的div</div>
</div>

在上面的示例中，我们创建了一个容器div元素和一个被固定在底部的子div元素。容器div元素的display属性被设置为flex，这样所有的子元素会成为一个flex容器。我们在容器div元素上同时使用了flex-direction: column、justify-content: space-between和align-items: stretch属性。这些属性的组合将子div元素推到容器div元素的底部。因为child-div没有设置margin，所以它将占据剩余的空间并位于底部。

3. 使用表格布局将div元素固定在底部

除了使用position属性和display:flex属性，我们还可以使用表格布局来将div元素固定在底部。表格布局是HTML中一种流行的布局方法。要将div元素固定在底部，我们可以使用HTML中的table、tr和td元素，以及CSS中的vertical-align属性。以下是一个示例：

<style>
    .container {
        display: table;
        width: 100%;
        height: 300px;
        border: 1px solid black;
    }

    .row {
        display: table-row;
    }

    .cell {
        display: table-cell;
        vertical-align: bottom;
        background-color: yellow;
        height: 50px;
    }
</style>

<div class="container">
    <div class="row">
        <div class="cell">我是固定在底部的div</div>
    </div>
</div>

在上面的示例中，我们创建了一个表格布局，其中包含一个容器div元素和一个行div元素。行div元素使用display: table-row属性，将其视为table布局中的一行。行div元素中包含一个单元格div元素，使用display:table-cell属性将其视为表格布局中的一个单元格。通过在单元格div元素上使用vertical-align: bottom属性，我们可以将其固定在容器div元素的底部。