css网格无法填充中间列100％vh

Question

我正在使用css网格对布局进行原型设计，其中我有三个名为discovery-list，drag-handle和sharing-list的网格区域。我需要根据屏幕宽度/大小调整布局。当屏幕宽度小于500px时，我想垂直堆叠这三个区域：

discovery-list
drag-handle (30px high)
sharing-list

如果屏幕宽度大于500px，我想将它们水平放置：

discovery-list drag-handle sharing-list

以下图片展示了我想要实现的目标，但第二个对我不起作用的是：

HTML

<div class="container">
  <div class="discovery-list">
    Discovery here
  </div>
  <div class="drag-handle">
    <div class="cancel">
      X
    </div>
    <div class="trash">
      xx
    </div>
    <div class="title">
      Title here
    </div>
    <div class="share-button">
      Share
    </div>
  </div>
  <div class="sharing-list">
    sharing list
  </div>
</div>

SASS代码

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 30px 1fr;
  grid-template-areas: "discovery-list"
                       "drag-handle"
                       "sharing-list";
  background-color: #fff;
  border: 1px solid #000;
  width: 100%;
  min-width: 400px;
  height: 450px;
}

@media only screen and (min-width: 500px) {
  .container {
    grid-template-columns: 1fr 30px 1fr;
    grid-template-areas: "discovery-list drag-handle sharing-list";
    grid-template-rows: 100%;
  }

  .drag-handle {
    grid-template-columns: 100%; /* why it does not go vertically? */
    grid-template-rows: 30px 30px auto 30px;
    grid-auto-flow: column;
    grid-template-areas: "cancel"
                         "trash"
                         "title"
                         "share-button";
  }
}

.discovery-list {
  grid-area: discovery-list;
  padding: 5px;
  background-color: maroon;
  color: white;
}

.drag-handle {
  grid-area: drag-handle;
  display: grid;
  grid-template-columns: 80px 80px auto 80px;
  grid-template-rows: 30px;
  grid-template-areas: "cancel trash title share-button";
  line-height: 30px;
  padding: 0 5px;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  background-color: #ccc;
  font-weight: bold;

  &.cancel {
    grid-area: cancel;
  }
  &.trash {
    grid-area: trash;
  }
  &.title {
    grid-area: title;
  }
  &.share-button {
    grid-area: share-button;
  }
}



.sharing-list {
  grid-area: sharing-list;
  color: white;
  padding: 5px;
  background-color: blue;
}

我的代码也在这个jsfiddle： https://jsfiddle.net/w6jw0sLj/。谢谢你的帮助！

Answer 1

尝试使用vh代替%长度。

＆＃13;

＆＃13;

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

.container {
  height: 100vh;           /* NEW */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 30px 1fr;
  grid-template-areas: "discovery-list"
                       "drag-handle"
                       "sharing-list";
  background-color: #fff;
  border: 1px solid #000;
  width: 100%;
  min-width: 400px;
  /* height: 450px; REMOVE */
}

@media only screen and (min-width: 500px) {
  .container {
    grid-template-columns: 1fr 30px 1fr;
    grid-template-areas: "discovery-list drag-handle sharing-list";
    grid-template-rows: 100vh; /* ADJUSTMENT */
  }
  
  .drag-handle {
    grid-template-columns: 1fr; /* why it does not go vertically? */
    grid-template-rows: 30px 30px auto 30px;
    grid-auto-flow: column;
    grid-template-areas: "cancel"
                         "trash"
                         "title"
                         "share-button";
  }
}

.discovery-list {
  grid-area: discovery-list;
  padding: 5px;
  background-color: maroon;
  color: white;
}

.drag-handle {
  grid-area: drag-handle;
  display: grid;
  grid-template-columns: 80px 80px auto 80px;
  grid-template-rows: 30px;
  grid-template-areas: "cancel trash title share-button";
  line-height: 30px;
  padding: 0 5px;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  background-color: #ccc;
  
  &.cancel {
    grid-area: cancel;
  }
  &.trash {
    grid-area: trash;
  }
  &.title {
    grid-area: title;
  }
  &.share-button {
    grid-area: share-button;
  }
}



.sharing-list {
  grid-area: sharing-list;
  color: white;
  padding: 5px;
  background-color: blue;
}

＆＃13;

<div class="container">
  <div class="discovery-list">
    Discovery here
  </div>
  <div class="drag-handle">
    <div class="cancel">
      X
    </div>
    <div class="trash">
      xx
    </div>
    <div class="title">
      Title here
    </div>
    <div class="share-button">
      Share
    </div>
  </div>
  <div class="sharing-list">
    sharing list
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请参阅附带的代码段。解决方案是通过添加一个额外的网格来完成，该网格负责“拖动手柄”。该网格包含4个文本区域。通过这样做，您可以使用“拖动句柄”响应文本区域。

wbk.Worksheets(1).Range("C11:J11").Copy _
    destination:=ThisWorkbook.Worksheets(1).Range( Chr(Asc("D")+i) & ":4")

.discovery-list {
  grid-area: discovery-list;
  background-color: darkred;
  color: white;
  padding: 10px 0px 0px 10px;
  font-size: 125%;
}

.drag-handle {
  grid-area: drag-handle;
  background-color: grey;
}

.sharing-list {
  grid-area: sharing-list;
  background-color: darkblue;
  color: white;
  padding: 10px 0px 0px 10px;
  font-size: 125%;
}

@media only screen and (max-width: 599px) {

.wrapper {
  display: grid;
  grid-template-columns:
  1fr
  ;
  grid-template-rows:
  300px
  50px
  200px
  ;
  grid-template-areas:
  "discovery-list"
  "drag-handle"
  "sharing-list"
  ;
  }

  .drag-handle {
    display: grid;
    grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    ;
    grid-template-rows:
    50px
    ;
    grid-template-areas:
    "text-area-1 text-area-2 text-area-3 text-area-4"
    ;
  }
}

@media only screen and (min-width: 600px) {

  .wrapper {
    display: grid;
    grid-template-columns:
    1fr
    1fr
    1fr
    ;
    grid-template-rows:
    300px
    ;
    grid-template-areas:
    "discovery-list drag-handle sharing-list"
    ;
  }

  .drag-handle {
    display: grid;
    grid-template-columns:
    1fr
    ;
    grid-template-rows:
    50px
    50px
    50px
    50px
    ;
    grid-template-areas:
    "text-area-1"
    "text-area-2"
    "text-area-3"
    "text-area-4"
    ;
  }
}