反应页面保持页脚在页面底部答案

【问题标题】：React page keep footer at the bottom of the page反应页面保持页脚在页面底部
【发布时间】：2017-02-12 22:07:55
【问题描述】：

尝试在页面底部修复页脚时遇到问题，如下图所示：

虽然我谷歌并看到了很多建议，但我仍然面临这个问题。我怀疑这个问题是<div data-reactroot></div> 不能将高度设置为 100% 作为它的父母。有人可以帮我吗？

提前致谢！

更新：页脚样式：

borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'

【问题讨论】：

确保您设置了html, body { height: 100% }
是的，我确定html, body { height: 100% }
我尝试将height 和/或min-height 的<div id="bms-root"> 设置为100%，但我得到了相同的结果。
当前页脚问题是什么？固定页脚是什么样的？
我想在页面底部修复页脚。这意味着页脚应始终显示在底部。

标签： javascript html css reactjs

【解决方案1】：

您需要告诉您的页脚将自己定位到周围容器的底部：

页脚CSS：

position:absolute;
left:0;
bottom:0;
right:0;

对于容器（react-root div）：

padding-bottom:60px;

作为替代方案（如果您不需要支持 IE 8），您可以在 div.container 上尝试这种风格：

height: calc(100% - 60px);

【讨论】：

工作正常。再次感谢你。顺便说一句，我怎样才能在屏幕中心显示文本“无结果”？
此解决方案对滚动不友好，滚动时页脚会停留在其初始位置
如果您需要滚动友好的解决方案，请使用 position:fixed;始终保持在底部。您可能还需要添加 z-index 以使其高于其他元素。

【解决方案2】：

对于上述解决方案不适用的任何其他人，您可以尝试以下步骤：

给父div一个非静态position，例如relative（记住默认position是static）
给父 div 的最小高度为100vh；这使它能够垂直占用所有可用空间
然后对于页脚 (child)，如果不是，它应该被包裹在 div 中，给它以下属性； position: absolute; bottom: 0; width: 100%。

更新：在某些情况下，将页脚 div position 设置为 absolute 可能不起作用。在这种情况下，请改用relative。

希望上述步骤可以解决它:-)

【讨论】：

似乎“相对”只适用于比浏览器窗口长的页面，而“绝对”只适用于比浏览器窗口更小或等高的页面。
是的@Lerk，看起来是这样

【解决方案3】：

拥有内容包装器并将其最小高度设置为 100vh 很重要：

min-height: 100vh; (100% of the viewport height)

min-height: 100%; (100% of the parent's element height)

看看这里对我有很好的解释和工作： https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551

【讨论】：

【解决方案4】：

我相信每个人都在这里缺少的一个技巧是，在 React 中，在 html 和 body 元素之后，还有一个带有 #root 的 div，它包含了整个内容。请参考下图。

因此，需要将高度设为所有 3 的 100%，即 html、body 和 #root。

html, body, #root {
  height: 100%;
}

然后在#root中添加这些属性：

#root {
 display: flex;
 flex-direction: column;
}

您一定想知道为什么#root 需要是 flex 而不是 body。原因是它是最内层的父级，或者我应该说是页脚的最接近的父级。

现在，最后只为页脚执行此操作：

footer: { margin-top: auto }

上面的行所做的是将页脚推到其父级的末尾。就如此容易。这里没有什么花哨的。无需计算高度或更改页脚位置。

【讨论】：

我不得不将它从 100% 更改为 100vh，但这对我有用。

【解决方案5】：

您是否尝试为您的页面添加一个包装器，以便您可以将页脚绝对定位在底部？如果是这样，您可以为此创建一个具有相对位置的新组件，并将其他组件作为子组件传入，并将您的页脚绝对定位在底部。

【讨论】：

【解决方案6】：

希望我早点阅读。这是Ikechuk 答案的sn-p，请注意现在footer 也尊重边距（在上面的任何其他答案中可能没有）：

html, body, div{
      height:100%;
      width:100%
      display:block;
    }
    footer{
      position:absolute;
      bottom:0;
      display:block;  
      width:100%
      
 }
 hr{
      display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
 }

<html>
<body>

<div style={"margin=5%;"}>
<div style={"position:relative"}>
<footer>
  <hr>
  I am footer
</footer>

</div>
</div>
</body>
</html>

【讨论】：

【解决方案7】：

我会按如下方式更改页脚 css：

  position: fixed;
  left:0;
  bottom:0;
  right:0;

position: absolute 是可能的，但它不适合滚动。

【讨论】：