css - 如何使用flexbox修复页眉而不是页脚？

Question

我尝试的是：

import Header from 'components/layouts/Header';
import Footer from 'components/layouts/Footer';
import 'tailwindcss/tailwind.css';

type Props = {
    className?: string;
};

const PageLayout: React.FC<Props> = ({ children, className }) => {
    return (
        <>
            <div className="flex flex-col h-screen w-full bg-gray-100">
                <Header />
                <div
                    className={`flex-1 overflow-y-auto page-wrapper ${className}`}
                >
                    {children}
                </div>
            </div>
            <Footer />
        </>
    );
};

export default PageLayout;

结果是这样的。

我在右侧有两个滚动条，这很奇怪。如何使用 flexbox 实现页眉固定而不是页脚？或者有没有更简单的方法来修复标题？

标签： cssreactjstailwind-css