时间戳

首页 > 解决方案 > 这个网格容器的高度是如何计算的？

html - 这个网格容器的高度是如何计算的？

问题描述

在＃2中，如何计算高度.footer？

#1

.footer {
}

img {
  width: 100%;
}
<div class="footer">
<img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image">
</div>

在此示例中，页脚的高度通过以下方式计算：初始包含块的宽度 ( html) 并考虑到图像的纵横比。

#2

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: 100%;
      grid-template-rows: 100%;
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
}
<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

我知道每张图片的宽度大约是页脚宽度的三分之一。什么决定了页脚的高度？我有一种感觉，图像的内在尺寸与它有关，但两个图像都没有放大到它的纵横比。img的height设置为 100%。100% 什么？

标签： htmlcsscss-grid

解决方案

首先，让我们摆脱一些属性以具有以下内容：

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  /* height: 100%; */
  width: 100%;
  outline:1px solid red;
}
<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

您有一个宽度等于的页脚100vw分为 3 个相等的列（所以33.33vw每个列左右）。每个图像将width:100%在每一列内，并且它们将保持它们的比例。从逻辑上讲，这将定义页脚的高度和单行的高度。height:100%由于我们正在处理 CSS 网格，同一行内的所有列将具有相同的高度，这个高度是这里的关键，也是添加到图像时用作参考的高度：

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
  outline:1px solid red;
}
<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

换句话说，内容被用来定义我们列的高度，这个高度后来被认为是我们百分比高度的参考。请注意，这grid-template-rows: 100%在这里是无用的，并且不会做任何事情，因为我们没有参考来解决该百分比。仅当您在网格上定义明确的高度时，它才会生效：

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
  margin: 0 auto;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
  outline:1px solid red;
}
<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

调整上面示例的屏幕大小，您会注意到网格、行和 3 列的高度将相等，200px因为我们明确定义了该高度，这与第一种情况下由内容定义的情况不同。

另一个不直观的例子，我们将有一个图像来定义高度，并将其高度作为基于其自身高度的百分比！

.icons {
  display: grid;
  margin: 0 auto;
  width:80%;
  border:2px solid
}

img {
  height: 150%;
  display:block;
  width: 100%;
  outline: 1px solid red;
}
<div class="icons">
  <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
</div>

请注意，如果我们没有设置高度，图像将如何溢出，这50%是图像高度之间的差异150%和高度。100%100%

与类似示例相关的问题：为什么我的 Grid 元素的高度没有被正确计算？

推荐阅读