How to make the div 100vh even if it has no children?-CodePudding

I have a simple page, which consists of a header, body, and footer. During the development, I want the content to have as much height as possible so that the entire page will have 100vh. The problem is that if I only put some plain text content as the body(so no children tags for the body), it will look like this:

It's wrong because then I will have to add height: 100%; width: 100%; in every children's style to make use of the full height of its parent. (imaging I pass a <div className=...>...</div> as the children)

This is the 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 already made .page:

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

CodePudding user response：

Seems like you want the children content inside to grow and fill up all the available spaces within its display: flex parent, it will be a good time to use flex-grow property.

Try this:

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 />
        <div className={styles.childrenContainer}>
          {children}
        </div>
      <Footer />
    </div>
  )
}

export default Page

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.childrenContainer{
  flex-grow: 1;
}

CodePudding user response：

One solution is to insert justify-content: space-between; on the page class, and margin-bottom:auto for your content to stick to your header.