在 Ant Design 中创建固定页脚

Question

我想用固定的页脚完成类似的事情。

--------------------------------
|          HEADER              | 
--------------------------------
|       |                      |
|       |                      |
| SIDE  |       CONTENT        |
|  BAR  |                      |
|       |                      |
--------------------------------
|          FOOTER              | 
--------------------------------

I'm using Ant Design layout 并且我添加了一个固定到页脚的位置，但是当侧边栏组展开时会阻止一些侧边栏链接，我遇到了一个奇怪的错误。

这是一个例子：

https://codepen.io/HugoLiconV/pen/jONBLJQ?editors=0010

编辑： 主要问题是，如果我因为有很多链接而展开说“展开我”的侧边栏组，页脚将隐藏一些链接。这种情况尤其发生在 1366 x 768 分辨率下

Answer 1

这是一个 codepen 链接 https://codepen.io/sniperdumbooo/pen/pozeZJb?editors=0010，说明您希望如何使用固定的页脚和居中的内容以及侧边栏大固定来实现

所做的更改已从页脚中删除 display: 'flex' 并将 textAlign: 'center' 添加到页眉部分并将 textAlign: 'justify' 添加到中心正文为：

<Header style={{ background: '#DDD', padding: 0, textAlign: 'center' }} >Header</Header>

<Footer style={{ 
        borderTop: '1px solid #e8e8e8',
        position: 'fixed',
        left: 0,
        bottom: 0,
        width: '100%',
        backgroundColor: 'white',
        textAlign: 'center'}} >

textAlign: 'justify'  ### to the div inside the <Content /> 

扩展时被阻止的侧边栏链接是由于位置： 'fixed' 在

 <Layout style={{
    overflow: 'auto',
    minHeight: '100vw',  ## make it minHeight: '100vw'
    width: '100%',
    left: 0      ### Removed the position: 'fixed'
  }}>

同时从 html id="container" 中的 div 中删除 style="padding: 24px"

<div id="container"></div>

将为您提供您想要通过此 codepen 链接中修复的错误实现的目标：Desired solution

Answer 2

您可以在px中添加与页脚高度相同的边距底部，请在css下方添加并检查，

.ant-layout-sider-children {
    height: 100%;
    margin-top: -0.1px;
    padding-top: 0.1px;
    margin-bottom: 95px;
}

Answer 3

不幸的是，这不能（很容易）用 CSS 解决，最好的办法是简单地将页脚移出一级，到 parent <Layout>:

的底部

<Layout> <!-- Core layout -->
    <Layout> <!-- Layout with Header and Content --> 
    </Layout>
    <Footer style={{ 
        borderTop: '1px solid #e8e8e8',
        position: 'fixed',
        left: 0,
        bottom: 0,
        width: '100%',
        backgroundColor: 'white',
        textAlign: 'center',
        display: 'flex',}}
        >
        Ant Design ©2018 Created by Ant UED
    </Footer>
</Layout>

这个可以看到here。

Answer 4

在这里，我对您的页脚 css 进行了一些更改，看起来不错。

  <Footer style={{ 
        borderTop: '1px solid #e8e8e8',
        position: 'fixed',
        left: 0,
        bottom: 0,
        width: '100%',
        backgroundColor: 'white',
        textAlign: 'center',}}
   >

希望这会有所帮助！

Answer 5

你好，我把所有答案都红了，我认为有一种更简单的方法可以只使用 antd 而不是使用额外的 css

只需在页脚周围使用这种词缀即可：

<Affix offsetBottom={0}>

如果需要，还可以提供文档： https://ant.design/components/affix/