【问题标题】: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>
    )}
    

    【讨论】:

      猜你喜欢
      • 2019-02-25
      • 1970-01-01
      • 2021-08-22
      • 2013-07-09
      • 2020-09-11
      • 2022-12-15
      相关资源
      最近更新 更多