Question

网格初始问题；）

我有一个包含3个元素（标题，imgWrapper，按钮）的边栏。标题和按钮应占据高度的1fr，而imgWrapper应使用自动高度。

imgWrapper包含另一个托管2x2图像的网格。我希望该容器将max-height：100％（=父级的autoheight）与y溢出一起使用，因此，如果有更多图片，则应使该容器可滚动。

有什么想法吗？预先谢谢你

当我为scrollBox使用像素值时，此代码有效，但我希望它具有响应性。

 <div id="selectCollage" class="editBox">
            <p class="title">Images</p>
            <form>
             <select>
                <option>Category</option>
                <option>Kategorie 1</option>
                <option>Kategorie 2</option>
                <option>Kategorie 3</option>
                <option>Kategorie 4</option>
                <option>Kategorie 5</option>
             </select>    
                <div class="imgWrapper">
                   <div class="scrollBox">
                    <img class="active" src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-1.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-2.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-4.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-5.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-6.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-7.jpg"}" alt="Test">
                    <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-8.jpg"}" alt="Test">
                    </div>
                </div>
           </form>
             <a href="#" class="ghostButton maxWidth">
                   <span class="icon-plus-circle lead"> Upload</span>
                </a>
        </div>


#designerWrapper #sidebar {
  grid-area: sb;
  background: #fff;
  border-radius: 1px;
  padding: $padding-l;
  & .ghostButton {
          margin: 0;
          padding: $padding-m $padding-s;
      }
  & .editBox {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 1fr auto 1fr;
      grid-gap: $margin-s;
      grid-template-areas: 
      "title" 
      "images"
      "button";

      & p.title {
          grid-area: title;
          font-size: 1.5rem;
      }

      & select {
          padding: $padding-m $padding-s;
        margin-bottom: $margin-s;
        }

    & .imgWrapper {
           grid-area: images;
           border: 1px solid $border-color;
           padding: $padding-m $padding-s $padding-m $padding-m;

          & .scrollBox{    
               height: 250px;
               max-height: 250px;
               overflow-y: auto;
               display: grid;
               grid-template-columns: 1fr 1fr;
               grid-gap: 1em;
               padding-right: $padding-s;
            & img {

                      margin: 0;
                      border: 3px solid #fff;
                      &.active {
                          border-color: $color-highlight-primary;
                  }
              }
          }
          }
          & .button {
              grid-area: button;
          }
      }
  }

CSS Grid自动高度+溢出

0 个答案: