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

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

css reactjs next.js

Css Next.js Styleing-由于某种原因页脚组件不在屏幕底部？,css,reactjs,next.js,Css,Reactjs,Next.js,Next.js Styleing-由于某种原因页脚组件不在屏幕底部 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 = p

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

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>

);

从“下一个/Head”导入Head；
从“/Navbar”导入导航栏；
从“/Footer”导入页脚；
常量布局样式={
显示：“flex”，
flexDirection:“列”，
高度：“100%”，
宽度：“100%”
};
常量布局=道具=>(
神谕
{props.children}
);

导出默认布局

页脚

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;

import React，{Component，Fragment}来自“React”；
类页脚扩展组件{
render（）{
返回(
>
©Oracle公司。保留所有权利。
)
}
}
导出默认页脚；

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

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

提前感谢，

我能够重现这个问题，并将

页脚

移动到页面底部，方法是向

页脚

组件添加一个内联样式样式={{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;

import React，{Component，Fragment}来自“React”；
类页脚扩展组件{
render（）{
返回(
>©Oracle公司。保留所有权利。
);
}
}
导出默认页脚；

我能够重现这个问题，并将

页脚

移动到页面底部，方法是在

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;

import React，{Component，Fragment}来自“React”；
类页脚扩展组件{
render（）{
返回(
>©Oracle公司。保留所有权利。
);
}
}
导出默认页脚；

尝试修改包装应用程序的下一个

\u

div

下一步{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}

尝试修改包装应用程序的下一个

\u

div

下一步{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}

您是否可以将其更改为

最小高度：100vh

，而不是

高度：100%

，您可以在页脚上使用

margin-top:auto

，也可以将

flex-grow:1

添加到页面包装器在像next这样的应用程序中使用flex的问题是next会添加一个额外的元素，该元素会中断全高和/或flex-stretch值。检查HTML，您将看到一个元素，其类为_next或类似。您还需要确保对该属性应用了适当的高度和/或弯曲。您完全可以使用flex box粘性页脚，而无需使用绝对位置。当没有足够的内容时，目标是在底部创建一个粘性页脚吗？或者，您是否试图让页脚始终可见，而不考虑内容的数量？由于您使用的是flex，您是否可以将页脚更改为

最小高度：100vh

，而不是

高度：100%

，您可以在页脚上使用

margin-top:auto

，也可以将

flex-grow:1

添加到页面包装器在像next这样的应用程序中使用flex的问题是next会添加一个额外的元素，该元素会中断全高和/或flex-stretch值。检查HTML，您将看到一个元素，其类为_next或类似。您还需要确保对该属性应用了适当的高度和/或弯曲。您完全可以使用flex box粘性页脚，而无需使用绝对位置。当没有足够的内容时，目标是在底部创建一个粘性页脚吗？或者你想让页脚总是可见的，不管内容有多少？这种方法很有效，除了页脚现在是一个进入角落的小矩形，哈哈！而且，当使用移动版本时，它不会停留在底部（查看Apple s5视图）。我在内联样式中添加了

宽度：“100%”

属性，使其能够覆盖整个底部。出于某种原因，当滚动过第一页时，页脚不会移动？Life saver回答这类问题，只不过现在，门变成了一个小长方形，进入了角落，哈哈！而且，当使用移动版本时，它不会停留在底部（查看Apple s5视图）。我在内联样式中添加了

宽度：“100%”

属性，该属性应允许它覆盖整个底部。出于某种原因，当滚动过第一页时，页脚不会移动？Life saver回答