1

所以我是网格新手。现在将它用于一些项目，但仍然不能很好地解决问题。我遇到了一个问题，我将网格元素设置为 100%，但它被剪裁为 80%。

这似乎是一个简单的修复，但我在过去的一个小时里一直在修补这个问题，似乎无法找到导致它的原因。

注意：我正在使用来自 fomantic 的滑块元素，但由于视点太小，它没有出现在代码预览中。

body{
  margin:0;
}
.page-wrapper{
  width:100%;
  height:100%;
  
  display:grid; 
  grid-template-columns:10% 40% 20% 10% 5%;
  grid-template-rows:4vh auto 2vh auto 6vh;
  grid-template-areas:". . . . ."
                      ". page_heading page_heading page_heading ."
                      ". . . . ."
                      ". svg-container . user_controls ."
                      ". . . . .";
  
}

.page_heading-wrapper{
  grid-area:page_heading;
  width:100%;
}

.svg-container{
  grid-area:svg-container;
}

.user_controls{
  grid-area:user_controls;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/components/slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/components/slider.min.js"></script>
<div class="page-wrapper">
  <div class="page_heading-wrapper"></div>
  <div class="svg-container">
      <svg class="user_svg_elem" height="210" width="400">
          <path d="M150 0 L75 200 L225 200 Z" data-path_to_mask />
          <path d="M150 0 L74 200 L225 200 Z" data-path_to_mask />
      </svg> 
  </div>
  <div class="user_controls ui slider"></div>
</div>

4

2 回答 2

1

您没有创建100% Grid column。grid-template-columns:10% 40% 20% 10% 5%;= 85%。让它100%。更改grid-template-columns:10% 40% 20% 10% 5%;为grid-template-columns: 20% 40% 20% 10% 10%;。现在是100% width。例子在这里。

还要添加box-sizingCSS。

*,
*:after,
*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

box-sizingCSS 属性设置如何width计算元素的height总和。MDN中的详细信息。

于 2019-12-25T18:21:59.807 回答
0

10% + 40% + 20% + 10% + 5% = 85%

可能问题就在这里。

网格不像表格那样工作，这些表格将百分比调整为始终为 100%。

您可以使用单位 fr 代替百分比：

grid-template-columns:1fr 4fr 2fr 1fr 0.5fr;
于 2019-12-25T18:20:04.733 回答