Chrome/Firefox在CSS Grid中的百分比高度差异 [英] Chrome / Firefox percentage height differences in CSS Grid

查看：75
本文介绍了Chrome/Firefox在CSS Grid中的百分比高度差异的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请注意，以下问题可以通过使用fr单位而不是％和auto来解决，但我想寻找一个解释为什么问题首先出现的原因.

在下面的代码中，

Firefox :不遵守grid-template-rows的值.将相等的高度应用于每行，但网格项不会溢出容器.

Chrome :似乎服从grid-template-rows属性，但是网格项使容器溢出.

最初，我认为问题出在％上，但这是该行允许的单位.我将 auto 值换成 10％，但这产生了自己的问题.

我看过文档，但是缺少一些东西.

有人有直接的解释吗?

 body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
} 

 <div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Codepen

解决方案

Chrome:似乎服从grid-template-rows属性，但网格 物品溢出了容器.

我最好说chrome正在做一个 来使它工作，因为计算有些复杂，而且我们有一个周期.基本上需要解决百分比值，并且最初(由于未定义高度)浏览器无法解析grid-template-rows的值，因此它将首先根据其内容计算包装器的高度(忽略grid-template-rows)，我们将获得如下内容:

 console.log(document.querySelector('.wrapper').offsetHeight); 

 body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  /*grid-template-rows: 30% auto 60%;*/
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
} 

 <div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

这是Firefox停止运行的步骤，但是chrome会尝试做更多的事情！注意我们获得的高度值(194px).现在，我们可以根据该值解析百分比值，您将获得以下信息:

 console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight); 

 body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
} 

 <div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

请注意第一个元素(第一行)的高度等于58px(0.3 * 194px)的高度，最后一个子元素(最后一行)的高度等于117px(0.6 * 194px ).从逻辑上讲，第二行应具有194px - 58px - 117px - 20px(gap) = -1的高度，这还不够，因此它将具有较大的高度，从而导致溢出.

溢出并不是真正的问题，而是这种 complex 计算的副作用，除非您为小于(100% - 20px/3 = 33.33% - 6.67px)的每行定义一个百分比值，否则将始终会有溢出./p> 

 console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight); 

 body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 20% 20% 20%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
} 

 <div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

另外，浏览器也不会通过增加包装器的高度来解决此问题，因为基于grid-template-rows是基于它定义的，因此我们会有一个循环.

类似的问题:不带高度的网格间隙百分比

Please note, the following problem can be solved by using fr units instead of % and auto, but I am looking for an explanation as to why the problem occurs in the first place.

In my code below,

Firefox: Does not obey the values for grid-template-rows. Applies an equal height to each row but the grid items do not overflow the container.

Chrome: Seems to obey the grid-template-rows property but the grid items overflow the container.

Initially I thought the issue was with % but it is an allowable unit for the row. I swapped out the auto value for 10% but that created its own problem.

I've looked at the documentation but I'm missing something.

Anyone have a straight-forward explanation?

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Codepen

解决方案

Chrome: Seems to obey the grid-template-rows property but the grid items overflow the container.

I would better say that chrome is doing an effort to have this working as the calculation is somehow complex and we have a cycle. Basically percentage value need to be resolved and initially (since there is no height defined) the browser cannot resolve the values of grid-template-rows so it will first cacluate the height of the wrapper based on its content (ignoring grid-template-rows) and we will obtain something like below:

console.log(document.querySelector('.wrapper').offsetHeight);

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  /*grid-template-rows: 30% auto 60%;*/
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

This is the step at where Firefox is stopping but chrome will try to do more! Note the value of the height we obtained (194px). Now we can resolve the percentage values based on this value and you will have this:

console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight);

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Note how the first element (the first row) is having a height equal to 58px (0.3 * 194px) and how the last child (the last row) is having a height equal to 117px (0.6 * 194px). Logically the second row should have a height of 194px - 58px - 117px - 20px(gap) = -1 which is not enough so it will have a bigger height thus the overflow.

The overflow isn't really an issue but a side effect of this complex calculation and you will always have it unless you define a percentage value for each row less than (100% - 20px/3 = 33.33% - 6.67px).

console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight);

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 20% 20% 20%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Also the browser won't get back to fix this issue by increasing the height of the wrapper as we will have a cycle since grid-template-rows was defined based on it.

Similar question: Grid gap percentage without height

这篇关于Chrome/Firefox在CSS Grid中的百分比高度差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆