页脚出现在“内容”区域

时间:2018-12-14 21:44:50

标签: html css reactjs less antd

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

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

我已重现错误here in the CodeSandbox

enter image description here

3 个答案:

答案 0 :(得分:1)

因此,由于多个<Layout />组件及其子代在高度不同时彼此交互的方式,因此发生了此问题。子级LayoutContent组件似乎总是(而不是总是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

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

答案 1 :(得分:0)

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

答案 2 :(得分:-1)

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

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

在布局标签之后。