作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我制作了一个粘性页脚高级组件,将其他组件包装在自身内部:
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>
但是它隐藏了页面的内容:
这看起来像是一个常见问题,所以我搜索了一下,发现 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/
我是一名优秀的程序员,十分优秀!