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

Why does Tailwind height not being applied? – CSS

I’m trying to make the navbar and footer 1/5 of the height of a wrapper div who should take the height of the whole screen but no matter what h-* class I use it doesn’t take effect:

import { useEffect } from "react";
import React from "react";

function App() {
  useEffect(() => {
    console.log("hello world");
  }, []);
  return (
    <div className="flex flex-col w-full h-full">
      <div className="bg-gray-300 flex justify-center items-center h-1/5 relative">
        <p className="m-auto text-5xl">NavBar</p>
      </div>
      <div className="h-full"></div>
      <footer className="bg-gray-300 flex text-5xl justify-center items-center w-full h-1/5 fixed bottom-0">
        <p className="m-auto text-5xl">Footer</p>
      </footer>
    </div>
  );
}

export default App;

https://codesandbox.io/s/react-tailwind-starter-forked-c2uh94?file=/src/App.js

Tags:

2

Answers


  1. 0

    From the Tailwind documentation:

    Full height

    Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

    So you’ll need to set a static height on the parent to let h-full take into effect.

    <div class="h-48">
  <div class="h-full ...">
    <!-- This element will have a height of `12rem` (h-48) -->
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I think you can achieve this goal by using tailwind Grid

    export function App(props) {
  return (
    <div className='App'>
      <div class="grid grid-rows-5 gap-4 ...">
        <div className="row-span-1 ...">
          <p className="m-auto text-5xl">NavBar</p>
        </div>
        <div className="row-span-3 ..."></div>
        <footer className="row-span-1 ...">
          <p className="m-auto text-5xl">Footer</p>
        </footer>
      </div>
    </div>
  );
}

    you can see docs here for additional details : https://tailwindcss.com/docs/grid-row#spanning-rows

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search