css 将标签固定在底部

### 使用CSS Flexbox将元素固定在页面底部 为了实现这一目标，可以创建一个父容器并设置其`display`属性为`flex`以及定义主轴方向。通过调整子项的排列方式和使用自动外边距（margin），可以使特定的子元素始终位于视口的最底端。 对于HTML结构而言，通常会有一个包裹所有内容的主要部分 `<main>` 和打算放置于底部的部分 `<footer>` 或者其他自定义标签来代表要固定的区域： ```html <div class="container"> <div class="content">Content goes here...</div> <div class="bottom-element">This will be fixed at the bottom</div> </div> ``` 针对上述HTML片段，在CSS样式表中应用如下规则可达成目的： ```css html, body { height: 100%; } .container { display: flex; min-height: 100vh; /* Ensure full viewport height */ flex-direction: column; } .content { flex-grow: 1; /* Allow content area to grow as needed */ } .bottom-element { margin-top: auto; /* Pushes this element towards the end of main axis */ } ``` 这段代码确保`.container`占据整个浏览器窗口的高度，并且内部的内容按照垂直列的方式分布。给定`.content`具有增长特性意味着它能够扩展填充可用空间；而对`.bottom-element`施加顶部自动外边距，则会使该元素尽可能远离起始位置——即被推到可视区间的底部[^1]。 ### 实现细节说明 - `min-height: 100vh`: 设置最小高度等于视窗高(`vh`)度单位，保证即使当页面内容较少时也能填满屏幕。 - `.content { flex-grow: 1 }`: 让主要内容区域优先占用剩余的空间，从而使得底部元素能稳定地位于页面下方。 - `.bottom-element { margin-top: auto }`: 利用Flex项目的弹性盒模型特性中的自动计算机制，使指定项目沿主轴方向移动至末端。 这种方法不仅简洁而且兼容性良好，适用于大多数现代Web开发场景下处理粘滞页脚或其他需定位到底部的情况。