внедрение нижнего колонтитула в окне вкладок расширенного поиска

Question

Я пытаюсь создать липкий нижний колонтитул, похожий на w3schools.

Я использовал тот же код в моей демонстрации пользовательского интерфейса, но он не работает.

Я отладил и изменил 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",