文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >css网格无法填充中间列100% vh

问css网格无法填充中间列100% vh
EN

Stack Overflow用户
提问于 2018-04-24 18:00:27
回答 2查看 521关注 0票数 1

我正在用css网格创建一个布局原型，其中我有三个网格区域，名为discovery-list、drag-handle和sharing-list。我需要根据屏幕的宽度/大小来调整布局。当屏幕宽度小于500 to时，我想垂直地堆叠这三个区域：

代码语言：javascript
复制
discovery-list
drag-handle (30px high)
sharing-list

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

代码语言：javascript
复制
discovery-list drag-handle sharing-list

下面的图片演示了我想要实现的目标，除了第二个对我不起作用的图像：

​

​

​

​

代码语言：javascript
复制
<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代码

代码语言：javascript
复制
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;
}

我的代码也是用编写的： https://jsfiddle.net/w6jw0sLj/。谢谢你帮忙！

html
css
layout
css-grid
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-24 19:43:46

请参阅附加的代码段。解决方案是通过添加一个额外的网格来处理“拖动句柄”。这个网格保存了4个文本区域。通过这样做，您可以得到文本区域中的“拖柄”响应。

​

代码语言：javascript
复制
.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"
    ;
  }
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="wrapper">

<div class="discovery-list">Discovery here</div>

<div class="drag-handle">
  <div class="text-area-1">X</div>
  <div class="text-area-2">xx</div>
  <div class="text-area-3">Title here</div>
  <div class="text-area-4">Share</div>  
</div>

<div class="sharing-list">sharing list</div>

</div>

<script src="index.jsx">
</script>
</body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2018-04-24 18:21:32

尝试使用vh而不是%长度。

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50008133

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档