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

Question

我尝试在页面底部修复页脚时出现问题,如下图所示:

虽然我谷歌并看到很多建议,但我仍然面临着这个问题.我怀疑这个问题是<div data-reactroot></div>不能将身高100%设为父母.谁能帮助我？

提前致谢!

更新:页脚样式:

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

Answer 1

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

页脚css:

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

对于容器(react-root div):

padding-bottom:60px;

作为替代方案(如果您不需要支持IE 8),您可以尝试以下方式div.container:

height: calc(100% - 60px);

Answer 2

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

因此，需要将 html、body 和 #root 三个部分的高度设置为 100%。

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

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

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

您一定想知道为什么 #root 需要弯曲而不是主体。原因是它是最里面的父级，或者我应该说是页脚最接近的父级。

现在，最后对页脚执行以下操作：

footer: { margin-top: auto }

上面一行的作用是将页脚推到其父级的末尾。就如此容易。这里没什么特别的。无需对高度进行任何计算或更改页脚的位置。

Answer 3

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

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

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

希望上面的步骤应该可以解决它:-)

Answer 4

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

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

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

Answer 5

我将更改页脚 css 如下：

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

可以有 aposition: absolute但它不适合滚动。