时间戳

首页 > 解决方案 > 即使在身体负载后也将页脚粘在底部

css - 即使在身体负载后也将页脚粘在底部

问题描述

我有一个反应应用程序，它<Footer />在主要组件的末尾有一个组件。页脚组件很简单：

import React from 'react';

function Footer() {
    return (
        <footer className="footer">
            Copyrights Reserved © {new Date().getFullYear()}
        </footer>
    );
}

export default Footer;

我设法使用以下样式将其固定在底部：

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background-color: #282c34;
  color: white;
  padding: 10px;
}

现在，我有一个组件<Body />，它开始为空，然后用稍后从远程调用接收到的数据填充自己，当这种情况发生时，组件超出了页脚，因为页脚无法保持在底部。

我尝试过的一些事情是：

  1. 添加margin-top: 100vh;而不是bottom: 0;，但页脚上方有一个巨大的空白。

  2. 添加height: 100%到身体，但似乎没有改变任何东西。

  3. 刷新组件，但这也会导致刷新 Body 组件。

有什么建议么？

标签： cssreactjs

解决方案

如果您使用 flex，只需将flex:1样式添加到您的 Body 组件，即使尚未加载数据。当它为空时，它将占用所有可用空间，并且页脚将位于底部。

推荐阅读