在高级搜索标签抽屉中实现页脚 [英] implementing footer in the advanced search tab drawer

问题描述

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

I am trying to develop a sticky footer similar to w3schools.

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

I used the same code in my material UI demo, but it is not working.

我调试了position并将其从fixed更改为absolute，但仍然无法正常工作.你们能帮我吗?是由于材料ui还是由于显示块引起的?

I debugged and changed position from fixed to absolute, but it still doesn't work. Can you guys help me? Is it due to material ui or is it due to display block?

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

When you click the advanced search tab, you can see the red color footer in the drawer. Providing my code snippet and sandbox below:

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

推荐答案

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

The element above your footer is causing the screen height to increase. You need to make the position of the footer relative to that element, so it is always below it.

position: "relative",

这篇关于在高级搜索标签抽屉中实现页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！