H5页面 使盒子放到最底部

H5页面中，如果你想让某个元素始终位于页面底部，可以利用CSS的`position`属性和`flexbox`布局或者`grid`布局，以及`z-index`或`bottom`属性来实现。以下是几种常见的方法：

1. **Flexbox布局**:

   .container {
     display: flex;
     justify-content: flex-end; /* 或者 bottom */
     align-items: flex-start; /* 或者 stretch 如果内容自适应高度 */
     height: 100%; /* 确保包含整个视口 */
   }
   
   .bottom-box {
     position: relative; /* 或者 absolute 如果需要脱离文档流 */
   }

2. **Grid布局**:

   .container {
     display: grid;
     place-items: end; /* 将元素放在网格的最后行 */
     height: 100vh; /* viewport的高度 */
   }

   .bottom-box {
     position: relative; /* 或者 absolute */
   }

3. **Positioning with `position: fixed`**:

   .bottom-box {
     position: fixed;
     bottom: 0;
     width: 100%;
     /* 可选，其他CSS定位样式 */
   }

这种方式适用于滚动内容下固定的元素。

4. **如果没有容器高度限制**，也可以直接给元素设置`margin-top: auto`，让它自动顶到剩余空间顶部：

   .bottom-box {
     margin-top: auto;
     position: relative;
   }