Next.js样式-页脚组件由于某种原因不在屏幕的底部？
Next.js样式-页脚组件由于某种原因不在屏幕的底部？
提问于 2020-05-14 10:19:54
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有关，但不确定如何修复:/
我想和next如何设置每个页面有关系吗？
提前谢谢你，
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-05-14 10:43:59
通过向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;Stack Overflow用户
发布于 2020-05-14 23:20:16
尝试修改包装应用程序的__next div。
#__next {
display: flex;
flex-direction: column;
min-height: 100vh;
}Stack Overflow用户
发布于 2021-07-02 19:09:05
在nextjs 'pages/_app.js‘中为它的<div class="container">添加了一个全局样式...
<style jsx global>
{`
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
`}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61788180
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号