页脚出现在内容区域

Question

我正在使用 Next.js 和 antd 的布局组件来获取仪表板样式页面，使用它们的 Layout 组件。我在这里有两个样式 (CSS) 问题：

Footer 夹在 Content 中：我实际上正在研究 固定端示例 来自 antd docs 的派生。我正在 Footer 落在 Content 组件之间。我想这是由于造型，但我无法弄清楚。 我应该寻找哪种样式问题？
滚动行为：如果完全展开，边栏无法滚动到末尾。相反，必须滚动浏览器 window 滚动条才能完全移动固定边栏的内容。如何禁用 window 的滚动条（内容的滚动条看起来也很难看）？ 如果不可能，如何使边栏的滚动流畅且独立于浏览器 window？

Answer 1

不幸的是，我不能编辑你的脚本，但在看过它之后。我建议你放置：

<Footer style={{ textAlign: "center" }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>

在布局标签之后。

Answer 2

您需要将页脚在第 119-120 行之间向下移动，这应该可以解决。这会将页脚放在与侧边栏相同的容器中。

Answer 3

所以这个问题是由于多个 <Layout /> 组件及其子组件在具有不同高度时相互交互的方式而发生的。子 Layout 和 Content 组件似乎总是（不是 100%，它总是）从它们的父组件 Layout 继承高度，或者至少总是有一个较小的高度。

目前，您的布局设置如下（伪代码）：

<Layout>
  <Layout restrictedHeight >
    <Layout inheritedRestrictedHeight>
      <Content inheritedRestrictedHeight >
        <div unrestrictedHeight />
      </Content> //Content "height" ends here
      <Footer fixedPosition /> //Always begins where Content ends
      //Div "height" ends here
    </Layout>
  </Layout>
</Layout>

由于页脚的实现方式，在 DOM 中它被放置在内容之后，但是由于大型 div 的 DOM 对象高度不受限制，它在内容容器下方很好地结束。这就是 Footer 组件出现在内容中间的原因。

原因是这一行：

<Layout hasSider={true} style={{ height: "100vh", marginTop: 64 }}>

您正在将高度属性设置为 100vh，表示 100% 视图高度，这实际上只是屏幕上 y 轴上当前可用的像素数。

您希望包含的布局对象是页面上所有内容的完整大小，而不是 100% 的视图高度，即使是屏幕外的内容。为此，只需将高度设置为 100% 而不是 100vh:

<Layout hasSider={true} style={{ height: "100%", marginTop: 64 }}>

编辑：这也可以解决您的双滚动条问题。

更新和回答非滚动边栏

我终于有机会再看看这个，这是您需要为 Sider 组件设置屏幕显示高度的地方。

该组件作为 div 呈现给 DOM，其中包含内容的高度。对于浏览器来说，它不在乎它的那一部分不在屏幕上，因为你实际上是在告诉浏览器它应该有那么大。

为了让侧边栏滚动，您需要将高度限制为 space 的大小（导航栏右下方到屏幕底部）。为此，您需要计算 100vh 减去侧边栏 css/less 中导航栏的大小：height: calc(~"100vh - 64px"); 并确保 overflow-y 是自动的。

.sidebar {
  // fixed sider
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(~"100vh - 64px");
  position: fixed;
  left: 0;
}

这是更新后的 codesandbox

以后尽量把问题集中在一个主要问题上，这样会得到更好的答案。

页脚出现在内容区域

Footer appears in Content's area

html

css

less

reactjs

antd