如何解决隐藏的文本,在滚动页脚中隐藏React中的正文文本

我有一个带有粘性页眉和页脚的简单应用程序,但是当我向下滚动时,页脚隐藏了正文的内容。

代码在这里:

https://codesandbox.io/s/elastic-goldwasser-b8u1p

这是页脚:

import React from 'react';
import './Footer.css';

const Footer = () => (
  <div className="footer">
    <p>This is some content in sticky footer</p>
  </div>
);

export default Footer;

及其样式:

.footer {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgb(235, 195, 64);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

知道是什么原因造成的吗?

评论
  • tiure
    tiure 回复

    是的,这是由于:

    .footer {
      margin-top: 1rem;
      padding: 1rem;
      background-color: rgb(235, 195, 64);
      position: fixed; // <----- HERE
      bottom: 0;
      left: 0;
      width: 100%;
    }
    

    它将重叠。

    解决此问题的方法是,使用一些等于或大于页脚高度的底部填充或边距。

    // someRandomText.js
    <div style={{padding: '80px 40px 92px 40px'}}> //<--- Made some change here
    

    WORKING DEMO