html - 页脚出现在内容区域

Question

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

• Footer 夹在 Content 中:我实际上正在研究 antd docs 中的 fixed-sider 示例 的派生词.我将 Footer 置于 Content 组件之间。我想这是由于造型，但我无法弄清楚。 我应该寻找什么类型的样式问题？
• 滚动行为:如果完全展开，侧边栏无法滚动到末尾。相反，必须滚动浏览器窗口滚动条才能完全移动固定边栏的内容。如何禁用窗口的滚动条(内容的滚动条看起来也很丑)？ 如果不可能，如何使侧边栏的滚动平滑且独立于浏览器窗口？

我已经重现了错误 here in the CodeSandbox .

Answer 1

所以这个问题是由于多个 <Layout /> 发生的组件及其子组件在具有不同高度时会相互影响。 child 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>

由于 footer 的实现方式，在 DOM 中它被放置在 Content 之后，但由于大 div 的 DOM 对象高度不受限制，它在 Content 容器下方很好地结束。这就是为什么 Footer组件似乎呈现在内容中间。

原因是这一行:

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

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

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

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

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

非滚动边栏的更新和答案

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

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

为了让侧边栏滚动，您需要将高度限制为该空间的大小(导航栏右下方到屏幕底部)。为此，您需要计算 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

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