Question 328947 in CSS Question posted in
Some basic documentation can be found here.

Css – div to take the rest of height

hello I want to make the last div to take the rest of height
im using tailwind
I tried this :

function Home() {

  const [expanded, setExpanded] = useState(true);
  
  return (
    <div className="flex h-screen">
      <SidebarContext.Provider value={{ expanded, setExpanded }}>
        <SideBarContent  expanded={expanded}/>
      </SidebarContext.Provider>
      <main className=" flex-grow h-full">
        <header className="text-3xl text-main font-bold h-fit ">Settings</header>
        <div className="flex-grow bg-portica-300">
          s
        </div>
      </main>
    </div>
  );
}

preview

Tags:

2

Answers


  1. 0

    Make it 100% using h-full

    function Home() {

  const [expanded, setExpanded] = useState(true);
  
  return (
    <div className="flex h-screen">
      <SidebarContext.Provider value={{ expanded, setExpanded }}>
        <SideBarContent  expanded={expanded}/>
      </SidebarContext.Provider>
      <main className=" flex-grow h-full">
        <header className="text-3xl text-main font-bold h-fit ">Settings</header>
        <div className="flex-grow bg-portica-300 h-full">
          s
        </div>
      </main>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Try this:

      <div className="flex h-screen">
    <SidebarContext.Provider value={{ expanded, setExpanded }}>
      <SideBarContent  expanded={expanded}/>
    </SidebarContext.Provider>
    <main className="flex flex-col h-full">
      <header className="text-3xl text-main font-bold">Settings</header>
      <div className="flex-1 bg-red-500">
      s
      </div>
    </main>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search