html - 如何使用 css 网格使主要内容 div 随内容扩展？

Question

Question:

I am trying to css grid div with content expand to show all the content within its div down page.

我曾尝试在“item-area”(容器)和“item-grid”div 上使用 overflow-y:hidden，但这会导致 div 截断“item-grid”div 中的内容。使 overflow-y 可见并没有使 'item-area' div 扩展。请注意，下面的页脚使用了 display:flex 但没有绝对位置。

将高度 100vh(以及最小高度 100vh)应用于“元素区域”div 无效。如果没有将任何溢出属性应用于“item-grid”，则使其在“item-area”内可滚动，而不是在页面内可滚动。我尝试将 styles.css 中的类 *{} 设置为高度:100vh，但它使每个 div 都有滚动条。为 html,body{} 添加类使其高度为 100vh 不会影响页面。

render(){
    const { slidervalue } = this.state
    return(
      <div id="item-area">
        <div id="side-menu">
          <h3>Filters</h3>
          <div className="size-box">
            <h5>Size:</h5>
            <ul>
              <li className="">
                <a>
                  <label class="container">XS
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">S
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">M
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">L
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">XL
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">XXL
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
            </ul>
          </div>
          <div className="color-box">
            <h5>Color:</h5>
            <ul className="color-list">
              <li className="swatch color-swatch-black pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-blue pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-red pointer">
                <a>  </a>
              </li>   <br />
              <li className="swatch color-swatch-nude pointer">
                  <a>  </a>
              </li>
              <li className="swatch color-swatch-white pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-grey pointer">
                <a>  </a>
              </li>   <br />
              <li className="swatch color-swatch-purple pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-brown pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-yellow pointer">
                <a>  </a>
              </li>  <br />
              <li className="swatch color-swatch-orange pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-pink pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-green pointer">
                <a>  </a>
              </li>  <br />
            </ul>
          </div>
          <div className="price-range">
            <h5 className="">Price:</h5>
            <ul className="prices">
              <li><a className="pointer">$10</a></li>
              <li><a className="pointer">$20</a></li>
              <li><a className="pointer">$30</a></li>
              <li><a className="pointer">$40</a></li>
              <li><a className="pointer">$50</a></li>
              <li><a className="pointer">$100</a></li>
            </ul>
          </div>
        </div>
        <div id="item-grid">
          <div className="item-product">
            <img className="item" src="/tops/1.jpg" />
            <p className="item-name">Light Blue Dress</p>
            <p className="item-price">$20</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/4.jpg" />
            <p className="item-name">Nude Dress with Blue Floral Design</p>
            <p className="item-price">$20</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/5.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/6.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/7.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/8.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/9.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/3.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/3.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
        </div>
      </div>
    );
  }

#item-area{
  display: grid;
  grid-template-columns: 25% 75%;
  /* height: 100vh; */
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 30px 30px;
  align-items: stretch;
  overflow-y: hidden;
  position: relative;
}

#side-menu{
  /* background-color: #33bced; */
  min-height: 100vh;
  overflow-y: hidden;
}

.size-box{

}

.size-box ul{
  list-style-type: none;
}

#item-grid{
  /* background-color: #50D050; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  padding-left: 50px;
  height: 100vh;
  min-height: 100vh;
  overflow-y: hidden;
}

.item-product{
  height: 600px;
}

.item{
  height: 500px;
}

#footer{
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
}

.footer_item{
  margin-left: 30px;
  margin-right: 30px;
  width: 200px;
  text-align: center;
}

.footer_item ul{
  padding: 0 !important;
  list-style: none;
}

[在此处输入图片描述][1]

感谢我能得到的任何建议，因为我一直在努力让它发挥作用。

谢谢-亚当·H

注意:包含的图像在“item-area”(包括过滤器侧面菜单和元素网格)和“item-grid”(产品列表网格)的两个容器 div 上使用 overflow-y: hidden 属性。

[1] 溢出-y 隐藏/image/g3BWA.jpg (链接)

[2]:溢出-y 自动 /image/n8rla.jpg

Answer 1

默认情况下，div 会拉伸(stretch)以适应其内容，除非您为其指定固定的高度。

我通过从 #item-grid 中移除高度解决了您的问题

https://codepen.io/chriseckenrode/pen/wvvxZOY

#item-grid{
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  padding-left: 50px;
  overflow-y: hidden;
}

min-height 在这里是可以的，但是如果你设置 height 你是说容器不能增长到大于这个值。