用 flex 填充页面并用 body 将页脚粘贴到底部（Tailwindcss，Nextjs）
Posted
技术标签:
【中文标题】用 flex 填充页面并用 body 将页脚粘贴到底部（Tailwindcss，Nextjs）【英文标题】：Fill page with body and stick footer to bottom with flex (Tailwindcss, Nextjs) 【发布时间】：2021-07-31 12:22:33 【问题描述】：我正在尝试使用 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" 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>【问题讨论】：
【参考方案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 应该像你建议的那样解决问题，但它没有改变任何东西。也感谢您的其他建议。以上是关于用 flex 填充页面并用 body 将页脚粘贴到底部（Tailwindcss，Nextjs）的主要内容，如果未能解决你的问题，请参考以下文章