粘性页脚适用于 HTML 项目，但不适用于 React 项目

问题描述 投票：0回答：1

我正在使用 React 构建一个 Web 应用程序。我创建了一个 html“沙箱”之类的东西来尝试设计和感觉，这样我就可以轻松地向我的老板展示它的外观和功能。我现在将其移植到我的 React 项目中，但遇到了一个奇怪的问题，我的页脚不粘。

我正在使用 Materialise CSS。然而，即使 html 看起来与我手写的 HTML 完全相同，我也无法让页脚停留在底部。

HTML 项目截图

React 项目截图

我已经尝试了我能想到的一切。我添加了内联样式并查看了 Materialise 文档，我发现的任何内容似乎都没有解决问题。

使用 Chrome 我相信我可以明白为什么，但我不知道如何修复它，也不知道为什么它会首先做这种类型的事情。看起来页脚的显示被设置为 

block
，而它应该是 
flex
。我的 CSS 中有正确的设置，但它们在我的 React 项目中被覆盖，我不知道为什么。下图显示了我的问题。

HTML CSS

反应CSS

我不知道这些额外继承的样式从何而来，所以我不知道如何更改它们。

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link type="text/css" rel="stylesheet" href="style.css">
    <title>HTML Version</title>
  </head>
  <body>
    <main>
      <div class="container">
        <div class="navbar-fi>xed">
          <nav class="nav-extended white">
            <div class="nav-wrapper white">
              <ul>
                <li>
                  <a href="test.html" class="brand-logo"><img src="logo64.png" alt="logo"/></a>
                </li>
              </ul>
            </div>
            <div class="nav-wrapper nav-2">
              <ul class="right">
                <li class="hoverable">
                  <a role="button" onClick="location.href='test.html';"><i class="material-symbols-outlined grey-text text-darken-1">logout</i></a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </main>
    <footer class="page-footer white">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="grey-text">Company</h5>
            <h6 class="grey-text text-darken-1">Awesome Slogan</h6>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="grey-text">Links</h5>
            <ul>
              <li><a class="grey-text text-darken-1" href="btuvent.com">Link 1</a></li>
              <li><a class="grey-text text-darken-1" href="gellert.com">Link 2</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright white">
        <div class="container ">
          <p class="grey-text text-darken-1">© 2024 Company Name</p>
        </div>
      </div>
    </footer>
  </body>
</html>

还有我的 React 代码：

import 'materialize-css/dist/css/materialize.min.css';

interface FooterProps { }

function Footer(props: FooterProps) {
    return <footer className="page-footer white">
        <div className="container">
            <div className="row">
                <div className="col l6 s12">
                    <h5 className="grey-text">Company</h5>
                    <h6 className="grey-text text-darken-1">Awesome Slogan</h6>
                </div>
            </div>
        </div>
        <div className="footer-copyright white">
            <div className="container ">
                <p className="grey-text text-darken-1">© Company Name</p>
            </div>
        </div>
    </footer>
}

export default Footer;

我可以向你保证，我在 React 中也有一个 

<header><main><footer>
，所以这不是我面临的问题。为了保持理智，我附上了反应输出的屏幕截图： React 生成的 HTML

css reactjs materialize
1个回答
0
投票

您的 

page-footer
具有块式显示并不是这里的问题。

将 

div
包裹在页眉、主元素和页脚元素周围，然后按如下方式使用它：

HTML

<div class="app">
    <header>Header</header>
    <main></main>
    <footer class="page-footer">Footer</footer>
</div>

CSS

body{
  padding: 0;
  margin: 0;
}

.app{
  background-color: gray;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-footer{
  height: 70px;
  background-color: white;
  display: block;
  margin-top: auto; /* this places the footer at the bottom of the page always*/
  font-size: 40px;
  text-align: center;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.