我正在使用Next.js和antd的布局组件,使用其Layout
组件来获取仪表板样式页面。我在这里有两个样式(CSS)问题:
Footer
夹在Content
中:我实际上是在研究antd docs的 fixed-sider示例的派生词。我将Footer
降到Content
组件之间。我想这是由于样式引起的,但我无法弄清楚。 我应该寻找哪种类型的样式问题? 我已重现错误here in the CodeSandbox。
答案 0 :(得分: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
将来,尝试将您的问题仅留在一个主要问题上,这将带来更好的答案。
答案 1 :(得分:0)
您需要在119-120行之间向下移动页脚,并且应该注意这一点。这样会将页脚与侧栏放在相同的容器上。
答案 2 :(得分:-1)
很遗憾,我只能在查看脚本后才能对其进行编辑。我建议您放置:
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
在布局标签之后。