Question

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

Footer夹在Content中：我实际上是在研究antd docs的 fixed-sider示例的派生词。我将Footer降到Content组件之间。我想这是由于样式引起的，但我无法弄清楚。 我应该寻找哪种类型的样式问题？
滚动行为：如果侧边栏完全展开，则不能滚动到其结尾。取而代之的是，必须滚动浏览器窗口滚动条以完全浏览固定侧边栏的内容。如何禁用窗口的滚动条（与内容的滚动条一起看起来也很难看）？ 如果不可能，如何使侧边栏的滚动平滑且独立于浏览器窗口？

Answer 1

因此，由于多个<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中将其放置在Content之后，但是由于大div的DOM对象的高度不受限制，因此在Content容器下面的效果很好。这就是Footer组件似乎呈现在内容中间的原因。

原因是这一行：

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

您正在将height属性设置为100vh，这意味着100％的视图高度，实际上就是y轴上屏幕上当前可用的像素数。

您希望包含的布局对象不是页面高度的100％，而是页面上所有内容的全部大小，甚至是屏幕外的内容。为此，只需将高度设置为100%而不是100vh：

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

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

更新和取消滚动边栏的答案

我终于有另一个机会来看看这一点，在这里您需要为Sider组件设置屏幕上显示的高度。

该组件以div形式呈现到DOM，其中包含内容的高度。对于浏览器，它不在乎它的一部分不在屏幕上，因为您实际上是在告诉浏览器它应该很大。

要使侧栏滚动，您需要将高度限制为该空间的大小（在导航栏的右下方，位于屏幕底部）。为此，您需要计算100vh减去侧边栏height: calc(~"100vh - 64px");中CSS / less中导航栏的大小，并确保溢出-y是自动的。

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

这是更新后的codesandbox

将来，尝试将您的问题仅留在一个主要问题上，这将带来更好的答案。

Answer 2

您需要在119-120行之间向下移动页脚，并且应该注意这一点。这样会将页脚与侧栏放在相同的容器上。

Answer 3

很遗憾，我只能在查看脚本后才能对其进行编辑。我建议您放置：

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

在布局标签之后。

页脚出现在“内容”区域

3 个答案: