如何将div定位在网页底部？React+Tailwind CSS问题求助

Tailwind CSS 实现方法 #

你只添加了bottom-8但未设置定位属性，Tailwind中的偏移类（如bottom-*）必须配合定位类才能生效。

如果要让div固定在浏览器视口底部（滚动页面时位置不变），可以这样写：

<div className="fixed left-0 right-0 bottom-8 flex flex-wrap justify-center p-4"/>

• fixed：设置固定定位，脱离文档流并相对于视口定位
• left-0 right-0：让元素左右撑满视口宽度
• bottom-8：距离底部8个单位（对应32px）

如果是要相对于某个父元素的底部定位，需要先给父元素添加relative类，再给目标div设置：

<div className="relative">
  {/* 父元素内容 */}
  <div className="absolute left-0 right-0 bottom-8 flex flex-wrap justify-center p-4"/>
</div>

常规CSS 实现方法 #

核心逻辑和Tailwind一致，通过定位属性实现：

内联样式写法 #

<div style={{
  position: 'fixed',
  left: 0,
  right: 0,
  bottom: '32px', // 对应Tailwind的bottom-8
  display: 'flex',
  flexWrap: 'wrap',
  justifyContent: 'center',
  padding: '1rem'
}}/>

外部CSS类写法 #

先定义CSS类：

.fixed-bottom-element {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem;
}

然后在React中使用：

<div className="fixed-bottom-element"/>

内容的提问来源于stack exchange，提问作者ayesha