帶有背景圖像的 div 在順風中的高度為 0

Question

我希望我的圖像占據整個屏幕，直到我滾動並顯示更多內容。

我想要這個： 我想全屏顯示圖像，直到我滾動

但我無法讓它工作，div的高度為0，唯一改變它的就是在里面放一些東西，例如。 一些文字。 但它只是繼承了文本長度。 我正在使用反應和順風，我已經在幾乎所有地方嘗試過min-h-full h-full但我無法讓它工作。

    <div className="relative">
      <div
        className="h-full w-full min-w-full min-h-full"
        style={{
          backgroundSize: "cover",
          backgroundAttachment: "fixed",
          backgroundImage: `url(${img})`,
        }}
      >
        text //This makes the div to have the height of 30px. Without this, height is 0.
      </div>
  </div>

Answer 1

沒有任何內容的div高度將為0px 。 在 styles object 中添加min-height: 100vh ，使div填滿整個屏幕。

vh表示視口高度， 1vh等於 window 高度的 1%。

Answer 2

您需要使用h-screen

<div className="relative">
      <div
        className="h-screen w-full "
        style={{
          backgroundSize: "cover",
          backgroundAttachment: "fixed",
          backgroundImage: `url(${img})`,
        }}
      >
        text //This makes the div to have the height of 30px. Without this, height is 0.
      </div>
  </div>