如何将网页底部的页脚与 tailwind 和 Next.js 对齐

Posted

技术标签:

【中文标题】如何将网页底部的页脚与 tailwind 和 Next.js 对齐【英文标题】:How to align footer at the bottom of the webpage with tailwind and Next.js 【发布时间】:2021-11-22 22:12:12 【问题描述】:

这是一个典型的代码,但不幸的是它没有工作。

<div className='bottom-0'>
  <Footer/>
</div>

【问题讨论】:

【参考方案1】:

要使其正常工作,我们需要转到您要在其上应用页脚的页面:

在我的情况下 pages/index.js 页面 index.js

现在回到 pages/_app.js _app.js

这会起作用

不要忘记提及“h-screen”类,否则它将不起作用

【讨论】:

点击链接,你可以看到图片,如果它帮助了这个答案 请不要将代码作为图像包含,但更喜欢复制粘贴。 why ?

以上是关于如何将网页底部的页脚与 tailwind 和 Next.js 对齐的主要内容,如果未能解决你的问题,请参考以下文章

CSS:页面底部的页脚重叠内容并具有更高的宽度

如何使页脚粘在页面底部并在 Bootstrap 中居中?

页脚与页面内容不断重叠

网页的页脚没有延伸到页面的最底部

如何强制我的页脚粘在 CSS 中任何页面的底部?

如何让此页脚与 textarea 对齐? Flexbox 似乎没有这样做