Control the height of a hero section in TailwindCSS / React.js-CodePudding

I am trying to create a website using React and Tailwind for the first time.

I want to display a Hero Section at the top and Nav bar at the bottom of the screen.

My strategy for doing this would be to have two separate divs. The hero section at 80vh and the Navbar at 20vh to cover the full page.

When trying to set this up I am trying to set my Hero Component up as such:

const HeroSection = () => (

  <div className="h-4/5 bg-green border-nft-gray-1">Hero Section</div>

);

export default HeroSection;

I am using the documentation of h-4/5 for 80% screenspace as document here:

Here is where the app is being compiled:

const Marketplace = ({ Component, pageProps }) => (
  <NFTProvider>
    <HeroSection />
    <Navbar />
  </NFTProvider>
);

export default Marketplace;

And here is the Provider im using to transfer data that wraps the two components and what is returns

  return (
    <NFTContext.Provider value={{ nftCurrency, buyNft, createSale, fetchNFTs, fetchMyNFTsOrCreatedNFTs, connectWallet, currentAccount, isLoadingNFT }}>
      {children}
    </NFTContext.Provider>
  );

From I can tell this is not interfering with the CSS in any way, what am I doing wrong in regards to tailwind and how do I achieve my desired composition?

Thanks alot

CodePudding user response：

You have set the height of your div (hero section) to h-4/5 which is indeed 80% height. But that height is only relative to its parent window. In order to do the styling you're thinking of you have to specify that you want the height of the whole viewport.

So change it to <div className="h-[80vh] bg-green border-nft-gray-1">Hero Section</div>

CodePudding user response：

Instead you can provide the height when you use the components.

const Marketplace = ({ Component, pageProps }) => (
  <NFTProvider>
    <HeroSection className="h-4/5" />
    <Navbar className="h-1/5" />
  </NFTProvider>
);

export default Marketplace;

And remove h-4/5 from the herosection component itself .