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

Question

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

代码在这里：

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%;
}

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

Answer 1

是的，这是由于：

.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

工作演示