[英]ReactJS - ant design - Fix Footer with Layout
I am using ant design framework in my project with reactjs.我在我的项目中使用 ant 设计框架和 reactjs。 I am trying to achieve a layout design in which the footer should stick to the bottom of the screen and header fixed to the top, only content should resize it should look like
我正在尝试实现一种布局设计,其中页脚应该贴在屏幕底部,标题固定在顶部,只有内容应该调整大小,它应该看起来像
--------------------------------
| HEADER |
--------------------------------
| | |
| | |
| LIST | CONTENT |
| | |
| | |
--------------------------------
| FOOTER |
--------------------------------
Below is my live example what I am trying to do下面是我正在尝试做的实时示例
https://codesandbox.io/embed/j4rkr509o3 https://codesandbox.io/embed/j4rkr509o3
I am not sure how to make it work, it would be very kind if any one can help me.我不知道如何使它工作,如果有人可以帮助我,那将是非常友好的。
Cheers.干杯。
I don't believe ant supports this automatically, but you can just set the height of the content div to be 100vh - (header.height + footer.height).我不相信 ant 会自动支持这一点,但是您可以将内容 div 的高度设置为 100vh - (header.height + footer.height)。 So in your example something like this:
所以在你的例子中是这样的:
<Content>
<div style={{ background: "blue", height: "calc(100vh - 55px)" }}>
text
</div>
</Content>
You can try adding position: sticky
to your <Header>
and <Footer>
, and specify the location (ie top, bottom
) you want them to stick to.您可以尝试将
position: sticky
添加到您的<Header>
和<Footer>
,并指定您希望它们粘贴的位置(即top, bottom
)。
To achieve your goal, you can try:为了实现您的目标,您可以尝试:
<Header style={{ position: "sticky", top: "0" }}>
<Footer style={{ position: "sticky", bottom: "0" }}>
Hope that helps, cheers :)希望有所帮助,加油:)
you can add {{position: 'sticky'}}
and place the Footer outside of the Content您可以添加
{{position: 'sticky'}}
并将页脚放在内容之外
You can use style={{ minHeight: "100vh" }}
for Layout component.您可以将
style={{ minHeight: "100vh" }}
用于布局组件。 Works for me.为我工作。 For example like this:
例如像这样:
<Layout style={{ minHeight: "100vh" }}>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
You can use the Sider
for side bar and set position: absolute
to the main layout with 100% height and width您可以将
Sider
用于侧栏并设置position: absolute
到具有 100% 高度和宽度的主布局
Here codesandbox这里的代码和框
Also it was not working the layout component because you did not include antd.css for codesandbox它也不能用于布局组件,因为您没有为代码和框包含 antd.css
Make your own sticky footer https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/制作自己的粘性页脚https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Then populate the rest of your site with AntD components.然后使用 AntD 组件填充站点的其余部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.