[英]Antd footer style doesn't stay at the bottom
Trying to make a footer with AntD which will actually persist at the bottom.试图用 AntD 制作一个实际上会在底部持续存在的页脚。 And it does.
它确实如此。 But the main issue is that its style doesn't.
但主要问题是它的风格没有。 Its styles get expanded into more areas.
其styles扩展到更多领域。
Here is a to understand it better(look at the white section):这是为了更好地理解它(查看白色部分):
Approaches I have tested:我测试过的方法:
Layout
Header
Content
Footer
And和
Layout
Layout
Header
Content
Footer
Here is the codesandbox: https://codesandbox.io/s/fervent-williamson-sl9bsi?file=/src/CustomLayout.tsx这是代码框: https://codesandbox.io/s/fervent-williamson-sl9bsi?file=/src/CustomLayout.tsx
Any idea how to fix it by limiting the footer CSS to only the footer component?知道如何通过将页脚 CSS 限制为仅页脚组件来解决它吗?
In your customlayout you set the height on line 16.在您的自定义布局中,您在第 16 行设置高度。
You had this: <Layout style={{ height: "100vh" }}>
你有这个:
<Layout style={{ height: "100vh" }}>
Change this To: <Layout style={{ height: "100%" }}>
将此更改为:
<Layout style={{ height: "100%" }}>
Now it adjust the body to the height of the page现在它将正文调整为页面的高度
Add this css to avoid overflow of the content添加此 css 以避免内容溢出
.ant-layout-content{
overflow-y: auto;
}
This will work fine for me.这对我来说很好。
<Layout style={{ minHeight: "100vh" }}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.