web-dev-qa-db-fra.com

Comment faire un pied de page collant en réaction?

J'ai créé un composant de niveau supérieur de bas de page collant qui enveloppe d'autres composants en lui-même:

Footer.js 

//this is a higher-order component that wraps other components placing them in footer

var style = {
    backgroundColor: "#F8F8F8",
    borderTop: "1px solid #E7E7E7",
    textAlign: "center",
    padding: "20px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "60px",
    width: "100%",
};

const Footer = React.createClass({
    render: function() {
        return (
            <div style={style}>
                {this.props.children}
            </div>
        );
    }
});

export default Footer;

Utilisation: 

<Footer><Button>test</Button></Footer>

Mais il cache le contenu de la page:

hiding contents footer

Cela ressemble à un problème commun, j'ai donc cherché un peu et trouvé ce problème , où est FlexBox est recommandé pour le pied de page collant. Mais à ce demo le pied de page est tout en bas de la page, alors que j'ai besoin que le pied de page soit toujours affiché sur la page et que le contenu défile dans la zone ci-dessus (comme dans SO chat) . En plus de cela, il est conseillé de modifier tous les autres composants avec des règles de feuille de style personnalisées. Est-il possible d'obtenir ce dont j'ai besoin en utilisant uniquement le composant de pied de page pour que le code reste modulaire?

cssreactjsfooterreact-jsxjsx
7
Poliakoff

Voici une idée (lien d'exemple de bac à sable).

Incluez une div fantôme dans votre composant de pied de page qui représente la position du pied de page que les autres éléments dom respecteront (c'est-à-dire affectant le flux de page en n'étant pas position: 'fixed';).

var style = {
    backgroundColor: "#F8F8F8",
    borderTop: "1px solid #E7E7E7",
    textAlign: "center",
    padding: "20px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "60px",
    width: "100%",
}

var phantom = {
  display: 'block',
  padding: '20px',
  height: '60px',
  width: '100%',
}

function Footer({ children }) {
    return (
        <div>
            <div style={phantom} />
            <div style={style}>
                { children }
            </div>
        </div>
    )
}

export default Footer
31
jacoballenwood

Il existe un moyen beaucoup plus simple. Je crée un site de portfolio avec React, et certaines de mes pages ne sont pas très longues, donc dans certains appareils, comme Kindle fire hd par exemple, le pied de page ne collerait pas au fond. Et bien sûr, mettre cela en place de façon traditionnelle avec ne fonctionnerait pas, car le serait enveloppé là-dedans. Et nous n'en voulons pas. Voici donc ce que j'ai fait:

Dans App.js:

import React, { Component } from 'react';
import {Header} from './components/Header';
import {Main} from './components/Main';
import {Footer} from './components/Footer';

class App extends Component {
    render() {
        return (
            <div className="App Site">
                <div className="Site-content">
                    <div className="App-header">
                        <Header />
                    </div>
                    <div className="main">
                        <Main />
                    </div>
                </div>
                <Footer />
            </div>
        );
    }
}

export default App;

Et puis dans _sticky-footer.css (j'utilise POSTCSS):

:root {
    --space: 1.5em 0;
    --space: 2em 0;
}

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

.Site-content {
    flex: 1 0 auto;
    padding: var(--space) var(--space) 0;
    width: 100%;
}

.Site-content:after {
    content: '\00a0';
    display: block;
    margin-top: var(--space);
    height: 0;
    visibility: hidden;
}

La solution originale pour cela a été créée par Philip Walton: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

7
Maria Campbell

Idée beaucoup plus facile (suivant la tendance), j'ai importé à la fois bootstrap et reactstrap, utilisé la classe bootstrap fixed bottom) et une solution de contournement avec cela comme ça.

class AppFooter extends Component{
render() {
    return(
        <div className="fixed-bottom">  
            <Navbar color="dark" dark>
                <Container>
                    <NavbarBrand>Footer</NavbarBrand>
                </Container>
            </Navbar>
        </div>
    )
}
4
Nicolas Silva

Vous pouvez résoudre ce problème en ajoutant margin-bottom: 60px; au body de votre site Web. Avec le 60px étant la hauteur de votre pied de page.

2
Leon

.App sera le composant principal que vous chargez sur votre racine.

Supposons que le pied de page est le dernier enfant de .App dans le flux de documents

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

footer {
  margin-top: auto;
}
0
lukem

Je voulais partager cette solution qui a fonctionné. J'ai cribté ceci depuis https://react.semantic-ui.com/modules/sticky . Faites défiler vers le bas de cette page et inspectez le texte "Ceci est le bas" pour voir où je l'ai volé. C'est un site construit sur réagir, donc cela devrait fonctionner pour votre situation.

C'est ici:

{
  padding-top: 50vh;
}

Conceptuellement, cette solution crée un espace négatif comme le div fantôme de jacoballenwood pour pousser le pied de page vers le bas et le coller là-bas. Ajoutez-le simplement à votre classe de style CSS pour le pied de page et ajustez la valeur au goût.

0
Aaron Pennington