使用Tailwind CSS的position fixed时overflow不生效如何解决？

安全阿岳

2026-6-25

问题出在你没给fixed定位的footer设置固定高度——overflow-y-auto只有当容器内容高度超过容器自身高度时才会触发滚动条，而fixed元素默认会被内容完全撑开，高度和内容一致，自然不会出现滚动条。

修复方案：

给footer添加固定高度类，同时保留overflow-y-auto，示例如下：

import React from 'react';

const Footer = () => {
   return (
        <footer className="bg-gray-100 dark:bg-gray-700 w-full fixed bottom-0 overflow-y-auto h-32">
         <div className="mx-auto w-full max-w-screen-xl p-4">
              {/* 这里放超出高度的footer内容，比如多行文本或列表 */}
              <p>第一行内容</p>
              <p>第二行内容</p>
              <p>第三行内容</p>
              <p>第四行内容</p>
              <p>第五行内容</p>
              <p>第六行内容</p>
         </div>
      </footer>
    );
}

export default Footer;