如何修复页脚？

Question

我有四个面板，目前，我只想将面板放在第三个面板下。

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

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

Answer 1

我假设您没有占据文档的全高。将此添加到 css

的顶部

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

这应该可以解决问题。如果它没有显示更多您的代码，那么我们可以确定问题。

Answer 2

我希望这段代码有所帮助，因为它将 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>

如何修复页脚？

How to fix footer?

css

footer

flexbox

reactjs