Question

我只需要一种使页脚发粘并在使用react时停留在页面底部的方法。

尽管遵循了具体化文档并在我的应用程序中创建了页眉，主要页脚，页脚格式，但页脚并未停留在页面底部。

页脚确实显示正确，但拒绝进入底部（是粘性页脚）。

这是app.js的呈现方法：

render() {
        return (
            <React.Fragment>
                <Header />
                <main>
                    ... my stuff here ... 
                </main>
                <Footer />
            </React.Fragment>
        );
    }

这是Header组件：

export default function About() {
    return (
        <header></header>
    );
}

这里是Footer组件（已从实现文档中精确复制）：


export default function About() {
    return (
        <footer className="page-footer">
          <div className="container">
            <div className="row">
              <div className="col l6 s12">
                <h5 className="white-text">Footer Content</h5>
                <p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
              </div>
              <div className="col l4 offset-l2 s12">
                <h5 className="white-text">Links</h5>
                <ul>
                  <li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div className="footer-copyright">
            <div className="container">
            © 2014 Copyright Text
            <a className="grey-text text-lighten-4 right" href="#!">More Links</a>
            </div>
          </div>
        </footer>  
    );
}

页脚确实显示正确，但拒绝进入底部（是粘性页脚）。

我在index.html的开头有这个（文档说这是使页脚变粘的方法）：

<script>

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

  main {
    flex: 1 0 auto;
  }

</script>

（我认为这是因为react将我的应用程序内容安装在<div id="root">中的index.html内，从而破坏了页眉，主要页脚格式的实现，使页脚具有粘性。）

我只需要一种使页脚发粘并在使用react时停留在页面底部的方法。

Answer 1

在react jsx中，您必须使用className而不是class。

class是javascript中的保留字。

您可以使用<div>标记代替<React.Fragment>和display: flex的{{1}}。在min-height: 100vh标记中，您可以使用<Footer />来应用样式，该样式应使页脚与页面底部对齐。

您会看到这个小提琴：https://jsfiddle.net/brunohgv/cjypx5wL/4/

物化脚注不使用react停留在底部

1 个答案: