Материализуйте нижний колонтитул, не оставаясь на дне, используя - PullRequest
Новая
       11

Материализуйте нижний колонтитул, не оставаясь на дне, используя

0 голосов
/ 28 июня 2019

Мне просто нужен способ сделать нижний колонтитул липким и оставаться в нижней части страницы при использовании реакции.

Нижний колонтитул не остается в нижней части страницы, несмотря на то, что я следую за материализацией документации и создаю заголовок, основной, нижний колонтитулы в моем приложении.

Нижний колонтитул отображается правильно, но отказывается идти вниз (будьте липким нижним колонтитулом).

Вот метод рендеринга app.js: 

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

Вот компонент Заголовок: 

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

Вот компонент нижнего колонтитула (точно скопированный из материализованной документации): 


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>

(я думаю, это потому, что реагирование монтирует содержимое моего приложения в <div id="root"> в index.html и, таким образом, разбивает заголовок, основной, материализованный формат нижнего колонтитула требует, чтобы нижний колонтитул был липким.)

Мне просто нужен способ сделать нижний колонтитул липким и оставаться в нижней части страницы при использовании реакции.

1 Ответ

1 голос
/ 28 июня 2019

В реакции jsx вы должны использовать className вместо class.

class - зарезервированное слово в javascript.

Вы можете использовать тег <div> вместо<React.Fragment> с display: flex и min-height: 100vh.В теге <Footer /> вы можете применить стиль с помощью align-self: flex-end, он должен выровнять нижний колонтитул по нижней части страницы.

Вы можете увидеть эту скрипку: https://jsfiddle.net/brunohgv/cjypx5wL/4/

...