反应页面保持页脚在页面底部
Posted
技术标签:
【中文标题】反应页面保持页脚在页面底部【英文标题】：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%，但我得到了相同的结果。
当前页脚问题是什么？固定页脚是什么样的？
我想在页面底部修复页脚。这意味着页脚应始终显示在底部。
【参考方案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 是可能的，但它不适合滚动。
【讨论】：
以上是关于反应页面保持页脚在页面底部的主要内容，如果未能解决你的问题，请参考以下文章