TailwindCSS/React.js中Hero区块高度设置不生效如何解决

Tailwind 中 h-4/5 对应的样式是 height: 80%，百分比高度的生效前提是父元素有明确设置的高度值，不会默认相对于浏览器视口计算。
当前你的组件层级中，html、body、项目根节点、NFTProvider 包裹层都没有设置显式高度，这些容器的高度默认由内部内容撑开，没有确定的高度值作为计算基准，所以 Hero 区块的 80% 高度设置失效，最终高度和内容高度一致。

二选一即可，第一种更简单适配你的需求：

方案1：直接使用视口相对单位（推荐） #

不需要额外设置父级高度，直接给两个区块设置对应视口占比的高度类即可：

• Hero 区块使用 h-[80vh]，直接占满80%视口高度
• Navbar 使用 h-[20vh]，占满剩余20%视口高度

修改后的 Hero 组件代码：

const HeroSection = () => (
  <div className="h-[80vh] bg-green border border-nft-gray-1">Hero Section</div>
);

export default HeroSection;

Navbar 组件给根节点加上 h-[20vh] 类就能实现预期的满屏布局。

额外提醒：你写的 border-nft-gray-1 类无法单独生效，Tailwind 中边框需要先声明边框宽度，比如 border border-nft-gray-1 才能正常显示边框样式。

方案2：保留百分比高度写法 #

如果你想继续用 h-4/5、h-1/5 这类百分比高度类，需要补全整条父级链的高度设置，让百分比有计算基准：

1. 在全局样式文件中给根节点设置100%高度：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 适配不同脚手架的根节点，Next.js用#__next，Vite/CRA用#root */
html, body, #__next, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 给 NFTContext.Provider 的根节点加上 h-full 类，让它占满父级的全部高度：

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

完成上述设置后，Hero 组件的 h-4/5、Navbar 组件的 h-1/5 就能正常生效，铺满整个视口。

内容的提问来源于stack exchange，提问作者Kevin