web-dev-qa-db-ja.com

反応でスティッキーフッターを作成する方法は？

他のコンポーネントを内部にラップするスティッキーフッターの高レベルコンポーネントを作成しました。

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;

使用法：

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

しかし、それはページのコンテンツを隠しています：

hiding contents footer

これはよくある問題のように見えるので、少し検索して この問題 を見つけました。ここでFlexBoxはスティッキーフッターに推奨されます。しかし this demo フッターはページの一番下にありますが、フッターは常にページに表示され、コンテンツは上記の領域内でスクロールされる必要があります（ SO chat） など。それに加えて、カスタムスタイルシートルールを使用して他のすべてのコンポーネントを変更することをお勧めしますが、コードをモジュール化したままにするためにフッターコンポーネントのみを使用して必要なものを達成することは可能ですか？

cssreactjsfooterreact-jsxjsx
7
Poliakoff

ここにアイデアがあります （サンドボックスのリンク例）。

他のdom要素が尊重するフッターの位置を表すファントムdivをフッターコンポーネントに含めます（つまり、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

もっと簡単な方法があります。 Reactでポートフォリオサイトを作成していますが、一部のページがそれほど長くないため、たとえばKindle fire hdなどの一部のデバイスでは、フッターが下に貼り付きません。もちろん、これを従来の方法で設定することは機能しません。そして、私たちはそれを望んでいません。だからこれは私がやったことです：

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;

そして、_sticky-footer.cssで（私は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;
}

このための元のソリューションは、Philip Waltonによって作成されました。 https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

7
Maria Campbell

はるかに簡単なアイデア（トレンドに従って）、私はbootstrapとreactstrapの両方をインポートし、bootstrap固定ボトムクラスとこのような回避策を使用しました。

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

これを修正するには、Webサイトのbodyにmargin-bottom: 60px;を追加します。 60pxがフッターの高さです。

2
Leon

.Appは、ルートにロードするメインコンポーネントになります。

フッターがドキュメントフローの.Appの最後の子であると仮定します

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

footer {
  margin-top: auto;
}
0
lukem

うまくいったこのソリューションを共有したかった。これを https://react.semantic-ui.com/modules/sticky から作成しました。このページの一番下までスクロールし、「This is the bottom」というテキストを調べて、どこで盗んだかを確認します。その上に構築されたサイトは反応するので、あなたの状況に合うはずです。

ここにあります：

{
  padding-top: 50vh;
}

概念的には、このソリューションはフッターを下に押してそこに貼り付けるために、jacoballenwoodのファントムdivのようなネガティブなスペースを作成しています。フッターのCSSスタイルクラスに追加し、値を好みに合わせて調整します。

0
Aaron Pennington