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

【问题标题】：Next.js Styling - Footer component for some reason is not at the bottom of the screen?Next.js 样式 - 由于某种原因页脚组件不在屏幕底部？
【发布时间】：2021-07-02 19:09:05
【问题描述】：

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 有关，但不确定如何解决：/

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

提前致谢，

【问题讨论】：

可以把height: 100%改成min-height: 100vh吗？
由于您使用的是 flex，您可以在页脚使用 margin-top:auto 或在页面包装器中添加 flex-grow:1
在 next 之类的应用程序中，flex 的问题是 next 添加了一个额外的元素，该元素会破坏整个高度和/或 flex 拉伸值。检查 HTML，您将看到一个具有 _next 或类似类的元素。您需要确保您也将适当的高度和/或弹性应用于属性。你完全可以在不做绝对位置的情况下做弹性盒子粘页脚。当没有足够的内容时，目标是在底部做一个粘性页脚吗？或者您是否试图让页脚始终可见，而不管内容数量如何？

标签： css reactjs next.js

【解决方案1】：

尝试修改包装应用程序的__next div。

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

【讨论】：

【解决方案2】：

通过向style={{ position: "absolute", bottom: 0, width:"100%" }} 的Footer 组件添加内联样式，我能够重现此问题并将footer 移动到页面底部。该组件看起来像：

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;

【讨论】：

这种工作，除了页脚现在是一个进入角落的小矩形哈哈！
而且，在使用移动版时，它不会停留在底部（看苹果s5视图）。
我将width:"100%" 属性添加到内联样式中，应该允许它覆盖整个底部。
由于某种原因，当滚动超过第一页时，页脚没有移动？
救命答案

【解决方案3】：

在 nextjs 'pages/_app.js' 中为其<div class="container"> 添加了全局样式...

        <style jsx global>
          {`

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

          `}
        </style>

【讨论】：