用 flex 填充页面并用 body 将页脚粘贴到底部（Tailwindcss，Nextjs）答案

【问题标题】：Fill page with body and stick footer to bottom with flex (Tailwindcss, Nextjs)用 flex 填充页面并用 body 将页脚粘贴到底部（Tailwindcss，Nextjs）
【发布时间】：2026-01-07 17:00:02
【问题描述】：

我正在尝试使用 flex-grow 使主体部分填充屏幕并将导航贴在底部，但我无法确定将它们应用于哪些元素。谁能指出它应该在哪个元素上？

我尝试使用 flex-col 将 _app.js 中导航上方的 div 设为 flex，然后将 flex-grow 应用于 category/[slug].js 的正文部分，但没有成功。

import Head from "next/head";
    import Link from "next/link";

    import Skeleton from "react-loading-skeleton";

    import { CURSORY_ARTICLES_BY_CATEGORY_QUERY } from "../../queries/articles";

    import { useRouter } from 'next/router';
    import { useQuery } from "@apollo/react-hooks";

    const Main = () => {
        const router = useRouter()
        const { slug } = router.query;
        
        const { data, loading, error } = useQuery(CURSORY_ARTICLES_BY_CATEGORY_QUERY, {
            variables: { category: slug }
        });

    return (
        <div>
        <Head>
            <link
                rel="preload"
                href='../public/fonts/Apple.ttf'
                as="font"
                crossOrigin=""
                />
        </Head>
        <div className="max-w-full flex container bg-gray-terminal bg-image justify-around">  
            <ul className="flex flex-col font-apple">
            {   
                loading ? <Skeleton count={6} width={512} height={256}></Skeleton> : 
                error ? <p>Error: {JSON.stringify(error)}</p> :
                data.articles.map(
                        (article) => {
                            return (
                                <Link href={`/articles/${article.slug}`}>
                                    <li key={article.slug} className="rounded gird grid-cols-4 justify-between cursor-pointer my-8 mx-2 md:mx-4 lg:mx-8 text-green-terminal hover:text-white border-4 border-green-terminal hover:border-white shadow-2xl bg-gray-terminal">
                                        <h1 className="mx-4 py-4 sm:py-2 w-1/3 col-span-1 font-apple">{article.title}</h1>
                                        <p className="mx-4 text-sm py-4 sm:py-2 w-2/3 col-span-3 font-apple">{article.description}</p>
                                    </li>
                                </Link>
                            );
                        }
                ) 
            }
            </ul>
        </div>
        </div>
    );
    }

    export default function SelectedCategory() {
        return (
            <Main />
        )
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";

import { ApolloProvider } from "@apollo/react-hooks";
import client from "../lib/apollo";

import Nav from "../components/nav";
import Footer from "../components/footer";

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return ( 
    <ApolloProvider client={client}>
      <div className="flex flex-col">
        <Nav />
        <Component {...pageProps} />
        <Footer />
      </div>
    </ApolloProvider>
  );
}

export default MyApp

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import Link from 'next/link';

export default function Footer() {
    return (
        <footer className="max-w-full container flex flex-col items-center bg-black font-apple">
            <Link href="https://twitter.com/Unenunciate">
                <svg className="my-4 cursor-pointer text-green-terminal fill-current hover:text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
            </Link>
            <Link href="/contact">
                <div className="tracking-wider text-md mb-4 text-green-terminal hover:text-white border-green-terminal hover:border-white hover:shadow-lg">
                    Contact
                </div>
            </Link>
            <div className="text-green-terminal text-sm mb-2">
               Copyright Ⓒ 2021
            </div>
        </footer>
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import CATEGORIES_QUERY from "../queries/categories";

import Link from 'next/link';
import Skeleton from "react-loading-skeleton";

import { useQuery } from "@apollo/react-hooks";

export default function Nav() {
    const { data, loading, error } = useQuery(CATEGORIES_QUERY, {
        variables: { slug: "categories" }
    });

    return (
        <div className="bg-black max-w sticky">
            <div>
                <nav className="flex justify-between container mx-auto py-4">
                    <ul>
                        <li className="group flex flex-row mx-2 text-green-terminal group-hover:text-white border-b-4 border-radius border-green-terminal hover:border-white hover:shadow-lg">
                    
                            <Link href="/">
                                <div className="flex flex-row cursor-pointer">
                                    <svg xmlns="http://www.w3.org/2000/svg" className="group-hover:text-white text-green-terminal fill-current h-5 w-5 -translate-y-2 icon  " viewBox="0 0 20 20" fill="#fff">
                                            <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
                                    </svg>
                                    <span className="group-hover:text-white font-apple tracking-widest">
                                        Uenunciate
                                    </span>
                                </div>
                            </Link>
                        </li>
                    </ul>
                    <ul>
                    </ul>
                    <div className="flex justify-between">
                        <ul className="flex flex-wrap mx-2 md:mx-4 lg:mx-8">
                                {   
                                    loading ? <Skeleton count={2} width={12} height={12}></Skeleton>: 
                                    error ? <p>Error: {JSON.stringify(error)}</p> :
                                    data.categories.map(
                                            (category) => {
                                                return (
                                                    <li key={category.slug} className="mx-2 md:mx-4 lg:mx-8 font-apple tracking-widest text-green-terminal hover:text-white border-b-4 border-green-terminal hover:border-white hover:shadow-lg ">
                                                        <Link href={`/categories/${category.slug}`}>
                                                            {category.name}
                                                        </Link>
                                                    </li>
                                                );
                                            }
                                    ) 
                                }
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    )
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

标签： javascript css reactjs next.js tailwind-css

【解决方案1】：

您可能只能在主要内容元素上应用align-items: stretch; (tw class: items-stretch)。

但是，您可能需要更深入地设置正文、:root (html) 和 #__next 元素的样式。这是一个普通的SASS 和Next tailwind 版本。

:root,
body,
#__next {
  @apply flex flex-col flex-1;
  @apply h-auto min-h-full w-screen max-w-full;
  @apply m-0 p-0;
  @apply overflow-y-auto overflow-x-hidden;
}

Here is a codesandbox example - 它没有使用tailwind 类，因为我无法让它与codeandbox 中的下10 个一起使用。它使用的是原版 CSS，但您可以理解。

只是一些建议：

将您的 svg 填充设置为“currentColor”，它可以让您轻松地使用文本颜色类为它们着色。

如果您要添加文本以外的任何内容或添加其他道具，则您的下一个/链接需要用“a”per the docs 包裹。

Exenal 链接不应使用 next/link，而应使用 rel="nofollow noreferrer" 来增强用户的安全性。

该示例还包括上述建议。

【讨论】：

不幸的是，这些关于身体的建议都没有奏效。页脚做了，但这不是我的意思。 /n 本教程是我试图做的，但似乎无法正确应用它们：/n dev.to/nehalahmadkhan/…
具体来说，我试图按照发帖人所说的以及该帖子的第一条评论建议使用 flex-grow 进行操作
查看我发布的示例
我尝试了您那里的示例顺风，但没有奏效。我看到它背后的逻辑在起作用，但我不明白为什么它不起作用。从我认为设置 min-h-full 应该像你建议的那样解决问题，但它没有改变任何东西。也感谢您的其他建议。