页脚出现在内容区域答案

【问题标题】：Footer appears in Content's area页脚出现在内容区域
【发布时间】：2018-12-14 21:44:49
【问题描述】：

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

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

【问题讨论】：

我已经更新了我的答案。

【解决方案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>

由于 footer 的实现方式，在 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 减去侧边栏的 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

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

【讨论】：

嗨@Ryan，这个解释很漂亮。问：你是如何推断的，你所说的“不是 100% 它总是继承身高”是什么意思？另外，能否请您查看第二期的侧边栏中的 janky/blocked 滚动。谢谢！
我曾经使用大多数浏览器内置的开发工具来计算布局组件及其子组件的大小。我发现无论我在 CSS 中将高度设置为多少，每个子布局都小于其父布局。我只说我不是 100% 总是这样，因为我没有对其进行足够的测试，也不知道 Layout 的内部是如何工作的。至于侧边栏，在我看来这也解决了它。
啊，我误读了这个问题。我不确定侧边栏以及为什么它不会滚动。
你真的很有帮助而且很准确。我已经针对 Sider 滚动问题提出了 antd 的问题。如果它不是直接的 CSS，我很乐意接受你的回答。在那之前，我宁愿保持这个开放。
当然可以，再一次很棒的解释。另外，我把这两个问题一起问了，因为我觉得它们可能是相关的，也就是说，这是故意试图提出我的代码的完整状态。谢谢！

【解决方案2】：

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

【讨论】：

嗨@Ty T，它没有！ Sider 也已修复，位于 Content 和 Footer 区域的顶部。

【解决方案3】：

很遗憾，我无法编辑您的脚本，但在查看之后。我建议你放置：

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

布局标签之后。

【讨论】：

你好@yaKay，那不行（试过了）。 Layout 组件在 antd 中使用了 flex 布局，因此将 Footer 拉出来是完全不同的布局，我不想要。