在TailwindCSS / React.js中控制英雄部分的高度

Question

我正在尝试创建一个网站使用第一次反应和尾风。

我想在屏幕顶部显示一个英雄部分，在屏幕底部显示Nav栏。

我这样做的策略是有两个独立的div。英雄部分在80 at，Navbar在20 at，以覆盖整页。

当我尝试设置它时，我尝试将我的英雄组件设置为这样：

const HeroSection = () => (

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

);

export default HeroSection;

我使用h-4/5的文档对80%的屏幕空间作为文档：

https://tailwindcss.com/docs/height

不幸的是，前端没有显示这一效果，这是结果，英雄节是绿色的div，它没有填充80%的vh，但仍然一样大的内容。

​

​

下面是该应用程序正在编译的地方：

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

export default Marketplace;

下面是提供程序im用于传输包装两个组件的数据以及返回的内容。

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

从我看来，这并不是以任何方式干扰CSS，我在顺风方面做错了什么，我如何实现我想要的构图？

非常感谢

Answer 1

您已经将div (英雄部分)的高度设置为h-4/5，这实际上是80%的高度。但是这个高度只是相对于它的父窗口。为了进行样式设计，您需要指定整个视图的高度。

所以将其更改为<div className="h-[80vh] bg-green border-nft-gray-1">Hero Section</div>

Answer 2

相反，您可以在使用组件时提供高度。

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

export default Marketplace;

并将h-4/5从解剖组件本身中移除。