如何修复页脚？

【问题标题】：How to fix footer?如何修复页脚？
【发布时间】：2021-01-02 03:08:22
【问题描述】：

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

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

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

【问题讨论】：

请提供更多信息，例如html 代码，一些结果图像。
您可以添加position:fixed 来固定底部的页脚。

标签： css reactjs flexbox footer

【解决方案1】：

我假设您的文档没有占据整个高度。将此添加到 CSS 的顶部

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

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

【讨论】：

【解决方案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;
}

&lt;div class="footer"&gt;Footer Content goes here&lt;/div&gt;

【讨论】：