反应图像不扩展高度

Question

我有这样显示的图像：

这个想法是图像应该延伸到页面的底部。 我正在尝试学习时有占位符图像。 知道为什么它可能不起作用吗？ 我真的只是想这样做，所以我了解设计页面的基本概念。 感谢您的所有帮助！

这是代码：

{<div className="directory">

  <div
    className="item"
    style={{
      backgroundImage: `url(${Stock1})`
    }}
  >

      <a>
      Stock 1
      </a>
  </div>
  <div
      className="item"
      style={{
        backgroundImage: `url(${Stock2})`
    }}
  >
      <a>
      Stock 2
      </a>

  </div>
</div>}

项目 =

    {
    width: 50%;
    height: 100%;
    float: left;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

对于位于 default.scss 上的容器：

    {
  width: 100%;
  height: calc(100% - 6.5rem);
  max-width: 1450px;
  padding: 0 10px;
  margin: 0 auto;
}

6.5rem 是标题的高度。

Answer 1

100% 仅与它的容器有关。 如果我对您的理解正确，您希望背景图像填满您可以使用的整个屏幕的高度：100vh，这是用户屏幕的总高度

Answer 2

这是物品的风格。 尝试改变高度