implementing footer in the advanced search tab drawer

问题

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

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

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

回答1:

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",

来源：https://stackoverflow.com/questions/53232921/implementing-footer-in-the-advanced-search-tab-drawer