ReactJS Material UI 粘页脚不起作用答案

【问题标题】：ReactJS Material UI sticky footer not workingReactJS Material UI 粘页脚不起作用
【发布时间】：2021-10-18 04:57:45
【问题描述】：

如何使用 Material UI 在 ReactJS 中获得粘性页脚。我试过了，但没有坚持到底。p>

export default function Footer() {
    return (
        <footer style={{color: "gray"}}>
            <center>Copyright ...</center>
        </footer>
    )
}

materialui 中似乎没有原生支持。如果解决方案不使用 boostrap 会很好。

【问题讨论】：

标签： reactjs material-ui sticky-footer

【解决方案1】：

您应该使用位置fixed 作为页脚：

<footer style={{color: "gray", position: "fixed", bottom: 0}}>
  <center>Copyright ...</center>
</footer>

【讨论】：

认为这可行，但如果降低浏览器高度，则会与内容重叠。

【解决方案2】：

这对你有用

export default function Footer() {
    return (
        <footer className="sticky bottom-0">
            <center>Copyright ...</center>
        </footer>
    )
}

【讨论】：

sticky 和 bottom-0 类从何而来？

【解决方案3】：

你可以用这样的东西让你的页脚变粘

export default function Footer() {return (
    <footer style={{color: "gray", position: "fixed", bottom: 0}}>
        <center>Copyright ...</center>
    </footer>
)}

【讨论】：