反應圖像不擴展高度

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

這是物品的風格。 嘗試改變高度