UniApp 盒子紧贴父容器底部方法详解

在 UniApp 开发中，你可能需要将一个盒子元素紧贴其父容器的底部。本文将介绍两种常用的方法来实现这一目标，并提供详细的代码示例。

方法一：使用绝对定位


<style>.container {  position: relative;  height: 200px; /* 父容器的高度 */}

.box {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 50px; /* 盒子的高度 */  background-color: #ccc;}</style>

**代码解析:**

1. 设置父容器 `position: relative;`，使子元素相对于父容器进行定位。
2. 设置子元素 `position: absolute; bottom: 0;`，使其绝对定位于父容器底部。

### 方法二：使用外边距

```html<template>  <view class='container'>    <view class='box'></view>  </view></template>

<style>.container {  height: 200px; /* 父容器的高度 */}

.box {  margin-top: auto;  width: 100%;  height: 50px; /* 盒子的高度 */  background-color: #ccc;}</style>

**代码解析:**

1. 设置 `margin-top: auto;` 会使盒子元素自动占据父容器剩余的垂直空间，从而紧贴底部。

### 总结

你可以根据实际情况选择适合的方法来实现盒子紧贴父容器底部。如果父容器高度固定，推荐使用绝对定位；如果父容器高度不固定，推荐使用外边距。