Next.js Styling - Footer component for some reason is not at the bottom of the screen?

user_7208058 0
Viewed 8567

Next.js Styling - Footer component for some reason is not at the bottom of the screen?

import Head from "next/head";

import Navbar from "./Navbar";
import Footer from "./Footer";

const layoutStyle = {
  display: "flex",
  flexDirection: "column",
  height: "100%",
  width: "100%"
};

const Layout = props => (
  <div className="Layout" style={layoutStyle}>
    <Head>
      <title>Oracle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
    </Head>
    <Navbar />
    <div>{props.children}</div>


    <Footer/>
  </div>

);

export default Layout;

footer

import React, { Component, Fragment } from "react";


class Footer extends Component {
    render() {
        return (
            <div className="bg-gray-100">
                <div className="bg-gray-100 container mx-auto px-6 pt-10 pb-6" >
                    >
                    © Oracle Corp. All rights reserved.
        </div>
            </div>
        )
    }
}

export default Footer;

I know this is something to do with next.js, but unsure how to fix : /

I think has something to do with how next sets up each page?

Thanks in advance,

next.js reactjs css
4 Answers

Try modifying the __next div that wraps the application.

enter image description here

#__next {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
user_42861300

I was able to reproduce this issue and move footer to bottom of page by adding an inline style to Footer component of style={{ position: "absolute", bottom: 0, width:"100%" }}. The component would look like: 

import React, { Component, Fragment } from "react";

class Footer extends Component {
  render() {
    return (
      <div style={{ position: "absolute", bottom: 0, width:"100%" }} className="bg-gray-100">
        <div className="bg-gray-100 container mx-auto px-6 pt-10 pb-6">
          > © Oracle Corp. All rights reserved.
        </div>
      </div>
    );
  }
}

export default Footer;
user_95871110

in nextjs 'pages/_app.js' adds a global style for its <div class="container"> ...

        <style jsx global>
          {`

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

          `}
        </style>
user_99333000

Those who put their components inside src (or any other name) folder, make sure to edit your Tailwind config file. before :

  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

after

  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],

This was my issue !

user_144262850
Related