gpt4 book ai didi

css - 如何在 react 中制作粘性页脚?

转载 作者:技术小花猫 更新时间:2023-10-29 11:13:29 29 4
gpt4 key购买 nike

我制作了一个粘性页脚高级组件,将其他组件包装在自身内部:

Footer.js

//this is a higher-order component that wraps other components placing them in footer

var style = {
backgroundColor: "#F8F8F8",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100%",
};

const Footer = React.createClass({
render: function() {
return (
<div style={style}>
{this.props.children}
</div>
);
}
});

export default Footer;

用法:

<Footer><Button>test</Button></Footer>

但是它隐藏了页面的内容:

hiding contents footer

这看起来像是一个常见问题,所以我搜索了一下,发现 this issue ,建议将 FlexBox 用于粘性页脚。但是在 this demo页脚位于页面的最底部,而我需要页脚始终显示在页面上并且内容在上面的区域内滚动(如 SO chat) 。除此之外,还有一个更改建议具有自定义样式表规则的所有其他组件。是否可以仅使用页脚组件样式来实现我需要的功能,以便代码保持模块化?

最佳答案

Here's an idea (沙盒示例链接)。

在您的页脚组件中包含一个虚幻的 div,它表示其他 dom 元素将遵守的页脚位置(即通过不在 position: 'fixed'; 中影响页面流)。

var style = {
backgroundColor: "#F8F8F8",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100%",
}

var phantom = {
display: 'block',
padding: '20px',
height: '60px',
width: '100%',
}

function Footer({ children }) {
return (
<div>
<div style={phantom} />
<div style={style}>
{ children }
</div>
</div>
)
}

export default Footer

关于css - 如何在 react 中制作粘性页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40515142/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com