在高级搜索标签抽屉中实现页脚

Question

我正在尝试开发类似于w3schools的粘性页脚。

我在材料UI演示中使用了相同的代码，但无法正常工作。

我调试了将position从fixed更改为absolute，但仍然无法正常工作。你们能帮我吗？是由于材料的用户界面还是显示块引起的？

单击高级搜索选项卡时，您可以在抽屉中看到红色页脚。在下面提供我的代码段和沙箱：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer

https://codesandbox.io/s/jvmoj49w1y

footer: {
    position: "fixed",
    left: 0,
    bottom: 0,
    width: 100,
    backgroundColor: "red",
    color: "white",
    textAlign: "center"
}

<div className={classes.footer}>
   <p>Footer</p>
</div

Answer 1

页脚上方的元素导致屏幕高度增加。 您需要确定页脚相对于该元素的位置，因此它始终在其下方。

position: "relative",