Question

所以我是网格新手。现在将其用于一些项目，但仍无法很好地解决问题。我在将grid元素设置为100％时遇到问题，但是它被裁剪为80％。

这似乎是一个简单的修复程序，但是我在最后一个小时一直在进行修改，似乎找不到导致它的原因。

注意：我使用的是fomantic的slider元素，但是由于视点太小而未出现在代码预览中。

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>

Answer 1

10％+ 40％+ 20％+ 10％+ 5％= 85％

可能是这里的问题。

网格不能像表格那样将百分比调整为总占100％。

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

# input data
data = "0,765,18273;0,721,18274;0,750,18275;"
# split based on ';' and removing the empty at the end
data_list = data.split(";")[:-1]

# inserting a list of list 
# [['0', '765', '18273'], ['0', '721', '18274'], ['0', '750', '18275']]
for i in range(len(data_list)):
  data_list[i] = data_list[i].split(",")

converter = lambda data: (float(data[0]),float(data[1])/1023*5,float(data[2])/1000)
real_data = list(map(converter, data_list))

print(real_data)

Answer 2

您没有创建100% 网格 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。 Example is here。

还要添加box-sizing CSS。

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

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

网格元素未扩展到100％宽度

2 个答案: