Fill page with body and stick footer to bottom with flex (Tailwindcss, Nextjs)

Question

I am trying to use flex-grow to make the body section fill the screen and have the nav stick to the bottom, but I can't figure out which elements to apply them to. Can anyone point me to which element it should be on?

I tried making the div above the nav in _app.js flex with flex-col then applied flex-grow to the body section of categories/[slug].js, but no luck.

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 (
        
        
            
        
          
            
            {   
                loading ?  : 
                error ? Error: {JSON.stringify(error)} :
                data.articles.map(
                        (article) => {
                            return (
                                
                                    
                                        {article.title}
                                        {article.description}
                                    
                                
                            );
                        }
                ) 
            }
            
        
        
    );
    }

    export default function SelectedCategory() {
        return (
            
        )
    }

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 ( 
    
      
        
        
        
      
    
  );
}

export default MyApp

import Link from 'next/link';

export default function Footer() {
    return (
        
            
                
            
            
                
                    Contact
                
            
            
               Copyright Ⓒ 2021
            
        
    );
}

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 (
        
            
                
                    
                        
                    
                            
                                
                                    
                                    
                                        Uenunciate
                                    
                                
                            
                        
                    
                    
                    
                    
                        
                                {   
                                    loading ? : 
                                    error ? Error: {JSON.stringify(error)} :
                                    data.categories.map(
                                            (category) => {
                                                return (
                                                    
                                                        
                                                            {category.name}
                                                        
                                                    
                                                );
                                            }
                                    ) 
                                }
                        
                    
                
            
        
    )
  }

Fill page with body and stick footer to bottom with flex (Tailwindcss, Nextjs)

Answers (1)

Related Questions