ReactJS - ant design - 用布局修复页脚答案

【问题标题】：ReactJS - ant design - Fix Footer with LayoutReactJS - ant design - 用布局修复页脚
【发布时间】：2019-02-16 07:53:02
【问题描述】：

我在我的项目中使用 ant 设计框架和 reactjs。我正在尝试实现一种布局设计，其中页脚应该贴在屏幕底部，标题固定在顶部，只有内容应该调整大小，看起来应该像

--------------------------------
|          HEADER              | 
--------------------------------
|       |                      |
|       |                      |
| LIST  |       CONTENT        |
|       |                      |
|       |                      |
--------------------------------
|          FOOTER              | 
--------------------------------

以下是我正在尝试做的实际示例

https://codesandbox.io/embed/j4rkr509o3

我不知道如何使它工作，如果有人可以帮助我，那将是非常好的。

干杯。

【问题讨论】：

标签： javascript css reactjs layout antd

【解决方案1】：

我不相信 ant 自动支持这一点，但您可以将内容 div 的高度设置为 100vh - (header.height + footer.height)。所以在你的例子中是这样的：

<Content>
   <div style={{ background: "blue", height: "calc(100vh - 55px)" }}>
      text
   </div>
</Content>

【讨论】：

我曾尝试使用calc，但不知怎的，它减去了50vh而不是50px。
您是在内联还是在您的 less 文件中定义高度？如果通过更少，则可能是您在stackoverflow.com/questions/27256849/… 此处报告的问题。答案很简单。
是的，我正在使用.less，我会尝试解决方案，谢谢。
我必须通过minHeight: ... 来支持大于浏览器窗口的页面。

【解决方案2】：

您可以尝试将position: sticky 添加到您的<Header> 和<Footer>，并指定您希望他们坚持的位置（即top, bottom）。

要实现你的目标，你可以尝试：

<Header style={{ position: "sticky", top: "0" }}>

<Footer style={{ position: "sticky", bottom: "0" }}>

希望有帮助，干杯:)

【讨论】：

position: sticky 如果你想要 IE 支持是不行的
@Yichaoz 如果你想要IE支持，我能想到的另一种方法是使用position: fixed。但是，这样做时，您必须做一些额外的造型才能获得所需的外观。

【解决方案3】：

您可以将style={{ minHeight: "100vh" }} 用于布局组件。为我工作。比如这样：

  <Layout style={{ minHeight: "100vh" }}>
    <Header>Header</Header>
    <Content>Content</Content>
    <Footer>Footer</Footer>
  </Layout>

【讨论】：

【解决方案4】：

您可以添加{{position: 'sticky'}} 并将页脚放在内容之外

here is an example with sticky footer

【讨论】：

【解决方案5】：

您可以将Sider 用于侧边栏并将position: absolute 设置为100% 高度和宽度的主布局

这里 codesandbox

布局组件也不能正常工作，因为您没有为代码框包含 antd.css

【讨论】：

它确实解决了，但我希望内容在页脚上方的屏幕内滚动，并且页脚不要超出屏幕，感谢指出antd.css 我想知道为什么它不呈现.
这将是完全不同的解决方案，因为页脚不知道正文是否溢出。您需要在不使用 Layout 组件的情况下手动布局，并将内容容器设置为
。其中 70px 是页脚 + 页眉的高度。但是 calc() 只支持 IE11 +
谢谢回复我现在不担心 IE，我尝试使用 calc 来确定内容的高度，但这似乎有问题，因为在你的情况下它变成了 30vh因为它将70px 视为vh 而不是px，这改变了整个事情。你能给它更多的光吗？