时间戳

首页 > 解决方案 > Next.js 样式 - 页脚组件由于某种原因不在屏幕底部？

css - Next.js 样式 - 页脚组件由于某种原因不在屏幕底部？

问题描述

Next.js 样式 - 页脚组件由于某种原因不在屏幕底部？

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>

);

导出默认布局；

页脚

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;

我知道这与 next.js 有关，但不确定如何修复：/

我认为与下一步如何设置每个页面有关？

提前致谢，

标签： cssreactjsnext.js

解决方案

我能够footer通过将内联样式添加Footer到style={{ position: "absolute", bottom: 0, width:"100%" }}. 该组件看起来像：

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;

推荐阅读