div 带有背景图片的顺风高度为 0

Question

我希望我的图片占据整个屏幕，直到我滚动显示更多内容。

我想要的正是这个：I want to make an image fullscreen until I scroll

但我无法让它工作，div 的高度为 0，唯一改变它的是在其中放一些东西，例如。一些文字。但它只是继承了文本长度。我正在使用 React 和 Tailwind，我已经在几乎所有地方都尝试过 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。将 min-height: 100vh 添加到样式对象，使 div 填满整个屏幕。

vh表示视口高度，1vh等于window高度的百分之一。

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>

div 带有背景图片的顺风高度为 0

div with background-image has 0 height in tailwind

html

css

tailwind-css