React页面如何将页脚固定在页面底部

Question

React页面如何将页脚固定在页面底部

javascripthtmlcssreactjs

32

我在尝试将页面底部的页脚固定到页面底部时遇到了问题，如下图片所示：

虽然我在谷歌上看到了很多建议，但我仍然面临着这个问题。我怀疑这个问题是因为 <div data-reactroot></div> 无法设置高度为其父元素的100％。有人能帮我吗？

提前致谢！

更新： 页脚的样式：

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

- An Nguyen

3

请确保设置html，body { height: 100％ }。 - ctrlplusb

1

我尝试将<div id="bms-root">的height和/或min-height设置为100％，但结果相同。 - An Nguyen

1

什么是当前的页脚问题？一个固定的页脚会是什么样子？ - JohnH

3

我想把页脚固定在页面底部，这意味着页脚应该始终显示在底部。 - An Nguyen

1

@mwoelk，我已更新问题以显示页脚的样式。 - An Nguyen

显示剩余2条评论

11个回答

12

如果上述解决方案对某些人无效，您可以尝试以下步骤：

给父级div设置非静态position，例如relative（请记住默认的position是static）。
为父级div设置最小高度为100vh；这使它可以在垂直方向上占用所有可用空间。
然后对于页脚（子元素），如果它没有被包装在一个div中，则给它以下属性：position: absolute; bottom: 0; width: 100%。

更新：在某些情况下，将页脚div的position设置为absolute可能无法正常工作。在这种情况下，请改用relative。

希望以上步骤可以解决问题 :-)

- Ikechukwu Kalu

1

似乎“相对定位”只适用于页面长度大于浏览器窗口的情况，“绝对定位”则只适用于页面高度小于或等于浏览器窗口的情况。 - Lerk

是的，@Lerk，看起来是这样。 - Ikechukwu Kalu

8

我认为大家都忽略了一个技巧，就是在React中，在html和body元素之后，还有一个带有#root的div，它包括了整个内容。请参考下面的图片。

因此，需要将所有三个元素即html、body和#root的高度设置为100%。

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

然后在 #root 中添加以下属性：

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

你可能会想知道为什么需要将 #root 设置为 flex，而不是 body。原因是它是 footer 的最近父元素。

现在，只需对 footer 进行以下操作：

footer: { margin-top: auto }

上述代码的功能是将页脚置于其父元素的末尾。就是这么简单，没有什么花哨的东西。不需要对高度进行任何计算或更改页脚的位置。

- Ankush Chauhan

我不得不将它从100％更改为100vh，但这对我起作用了。 - Lauren

6

我会将页脚的CSS更改为以下内容：

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

即使可以使用 position: absolute，但它不支持滚动。

- benjdan

5

在IT技术中，拥有内容包装器并将其最小高度设置为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

- Ginte Ezerskyte

3

flex-grow

虽然来晚了，但我的解决方案是：

<div className="layout">
  <Navbar />
    <main>
      {children}
    </main>
  <Footer />
</div>

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout main {
  flex-grow: 1;
}

- Tom Walsh

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Neeraj

1

您是否想要一个页面包装器，以便可以将页脚绝对定位在底部？如果是这样，您可以创建一个具有相对位置的新组件，并将其他内容作为子元素传递，并将页脚设置为底部的绝对定位。

- ceckenrode

1

希望我早点看到这个。这里是Ikechuk的答案片段，注意现在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>

- guneetgstar

0

谢谢，@mwoelk已经回答了这个问题。我只是想对初学者更清楚地解释一下。

步骤1 --- 底部 CSS：

.Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}

步骤 2 --- Footer css的包装器: (让我们以React为例，通常将Footer包装在.App内。添加底部填充的原因是，如果内容太长，则避免一些内容被底部的Footer覆盖。)

.App {
  padding-bottom: 60px;
}

- Joe

0

使用这个CSS类来设置页脚。

.c-mt-auto {
  margin-top: auto;
}

这是用于包含主体和页脚的容器

的内容。

.c-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

- Hassan Uddin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mwoelk · Accepted Answer

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

页脚 css:

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

对于容器（即react-root div）:

padding-bottom:60px;

作为另一种选择（如果您不需要支持IE 8），您可以尝试在

上使用此样式：

height: calc(100% - 60px);