如何修复页脚？

编程问答 2022-07-22

问题描述

我有四个面板，目前，我只想在第三个面板下安装该面板。

footerRoot: {
        /* textAlign: "center",*/
        backgroundColor: theme.palette[0],bottom: 0,padding: "10px 10px 0px 10px"
}

我有很多屏幕，目前，页脚仅在三个屏幕的底部完美显示，而对于其他屏幕，页脚在页面中间突然显示。如何更改代码以将其推送到每个屏幕的页面底部？ 注意：我想避免位置：绝对。

解决方法

我认为您的文件没有全高。 将此添加到您的CSS顶部

html {
   height : 100%;
}
body {
   min-height: 100%;
}

应该可以解决问题。如果没有显示更多代码，我们可以解决问题。

,

我希望这段代码对您有所帮助，因为无论其内容是什么，它都将body height定义为100%并将footer包含的元素推到底部网页body中的所有内容，并将其扩展到body width left: 0和right: 0即可。

body{
  min-height: 100%;
}
.footer{
  position: fixed;
  bottom: 0;
  border: 1px solid #efefef;
  left: 0;
  right: 0;
  text-align: center;
}
<div class="footer">Footer Content goes here</div>

flexboxfooterreactjsreactjs