As I work on a simple webpage with a header, body, and footer, it's essential for me to ensure that the content takes up the entire height of the page using 100vh. However, if I only have plain text in the body section without any child tags, it ends up looking like this:
https://i.sstatic.net/WMwkf.png
This presents an issue as I would need to manually add height: 100%; width: 100%; to the styles of each child element to utilize the full height of its parent. For instance, if I pass a
<div className=...>...</div>Shown below is the code snippet for page.tsx:
import Footer from '@/components/Page/Footer'
import Header from '@/components/Page/Header'
import styles from './index.module.css'
interface PageProps {
children: any
}
function Page({ children }: PageProps) {
return (
<div className={styles.page}>
<Header />
{children}
<Footer />
</div>
)
}
export default Page
I've already defined the style for .page as follows:
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}