Question

我在我的项目中使用带有reactjs的ant设计框架。我正在尝试实现一种布局设计，其中页脚应固定在屏幕底部，页眉应固定在顶部，只有内容应调整其大小应类似于

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

下面是我的实时示例

https://codesandbox.io/embed/j4rkr509o3

我不确定如何使它工作，如果有人可以帮助我，那将非常好。

干杯。

Answer 1

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

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

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

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

希望如此，请加油：）

Answer 2

我不相信ant自动支持此功能，但是您可以将内容div的高度设置为100vh-（header.height + footer.height）。因此，在您的示例中，如下所示：

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

Answer 3

您可以将 find 用于布局组件。为我工作。例如像这样：

style={{ minHeight: "100vh" }}

Answer 4

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

这里 codesandbox

由于您没有在codeandbox中包含antd.css，因此它在布局组件中也不起作用

Answer 5

制作自己的粘性页脚https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

然后用AntD组件填充网站的其余部分。

ReactJS-蚂蚁设计-使用布局修复页脚

5 个答案: