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

Posted 2023-03-06

技术标签:

【中文标题】如何使用 css 网格使主要内容 div 随内容扩展？【英文标题】：How make main content div using css grid expand with content? 【发布时间】：2020-03-07 16:09:06 【问题描述】：

问题：

我正在尝试将内容扩展为 CSS 网格 div 以显示所有其 div 向下页面中的内容。

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

将高度 100vh（以及最小高度 100vh）应用于“项目区域”div 不起作用。如果没有将任何溢出属性应用于“项目网格”，则使其在“项目区域”内可滚动，而不是在页面内可滚动。我已经尝试在styles.css 中使类 * 具有 height: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）和“item-grid”（产品列表网格）的两个容器 div 上都使用了 overflow-y: hidden 属性。

[1] 溢出-y 隐藏 https://i.stack.imgur.com/g3BWA.jpg（链接）

[2]: 自动溢出 https://i.stack.imgur.com/n8rla.jpg

【问题讨论】：

你需要扩展的主要内容是什么？有一个网格项目，我想扩大页面的长度。当前隐藏了溢出-y，它切断了其他两行。我想成为可以看到项目网格中所有行的地方。请注意，我将错误的图像放在底部 【参考方案1】：

默认情况下，一个 div 会拉伸以适应它的内容，除非你给它一个固定的height。

我通过删除 #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 你是说容器不能比这个大。

【讨论】：

我实际上只是尝试在调试器中使用'item-area'的高度属性改变了它的大小，并且通过删除它实际上使它扩大了。【参考方案2】：

--编辑--刚刚在我输入这个时看到了上面的答案。感谢您解释发生了什么。

我不敢相信这是删除包含子网格 'item-grid' div 的 'item-area' 容器 div 上的 height 属性这样简单的事情。

似乎通过定义 100vh 的高度使它切断了内容。我开始在 Firefox 的调试器中使用高度，并开始将值更改为 1000 像素或 2000 像素，我注意到了一个变化。然后我决定看看如果我删除 height 属性会发生什么，然后允许显示所有内容。

【讨论】：

以上是关于如何使用 css 网格使主要内容 div 随内容扩展？的主要内容，如果未能解决你的问题，请参考以下文章

如何使DIV背景透明内容不透明

如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏

将内容扩展为空div

css怎么使一个div的高随另一个div的高的变化而变化，还有就是怎么使第三个div的位置随它们的高度而变化。

DIV+CSS布局，怎么实现两列高度会一致，其中左例随内容长度而定。

css Css网格中心内容的div