为什么我的 div 会通过媒体查询改变高度？

Question

我正在使用 CSS 网格构建容器 div 网格。

我的主要 CSS 是针对移动视图的，然后我将媒体查询用于桌面视图，将第二个媒体查询用于更宽的屏幕。

实际上，我从 grid-template-columns:1fr (Mobile) 切换到 grid-template-columns: 1fr (Desktop) 到 grid-template-columns: 1 fr 1fr (Widescreen)。

到目前为止，一切都很好。但是，当我在 2 个桌面视图之间调整大小时，我的 div 会改变高度（尽管高度：自动）。

我将粘贴相关的 CSS：

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 3vmin;
}

.special {
  width: 90%;
  height: auto;
  border: 1px #000 solid;
  box-shadow:0 0.1rem 0.5rem rgba(0,0,0,0.2);
  justify-self: center;
  border-radius: .5rem;
  padding-bottom: 5%;
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

@media only screen and (min-width: 415px) {
  /*.container {
    grid-template-columns: 1fr;
  }*/

  .special {
    width: 550px;
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

.container 用于保存 CSS 网格，.special 是“卡片”。 .special 中的所有内容也使用 height:auto。

示例图片：

min-width: 415px media query

min-width: 1200px media query

这几天我一直在摸不着头脑。有人可以帮我解释一下吗？

Codepen 供参考：https://codepen.io/stetsonthree/pen/YYQgze

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 3vmin;
}

.special {
  width: 90%;
  height: auto;
  border: 1px #000 solid;
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
  justify-self: center;
  border-radius: .5rem;
  padding-bottom: 15px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.special:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 255, 0, 0.2);
}

.spc-banner {
  text-align: center;
  background-color: #B5B5B5;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  letter-spacing: 0.1em;
}

.spc-promo {
  text-align: center;
  background-color: #B5B5B5;
  border-radius: 0 0 .5rem .5rem;
  width: 50%;
  margin: auto;
  margin-bottom: 2%;
}

.inner-container {
  display: grid;
  grid-template-columns: 100%;
  text-align: center;
  justify-items: center;
}

.spc-image img {
  width: 250px;
  max-width: 100%;
  height: auto;
}

.spc-deals {
  height: auto;
  width: 100%;
}

.spc-contact {
  margin-top: 15px;
  width: 100%;
  height: auto;
}

.spc-cta {
  margin-top: 15px;
  width: 100%;
  height: auto;
}

.deals-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 3vmin;
}

.btn-contact {
  width: 90%;
  background-color: #556270;
  background-image: linear-gradient(to bottom, #979799, #666766);
  border: 1px solid #1e3650;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  -webkit-text-size-adjust: none;
  mso-hide: all;
}

.btn-deal {
  width: 90%;
  background-color: #556270;
  background-image: linear-gradient(to bottom, #1f72e4, #1c62c5);
  border: 1px solid #1e3650;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-text-size-adjust: none;
  mso-hide: all;
}

.side-by-side-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  align-items: flex-end;
  margin: auto;
  margin-top: -15px;
}

.btn-sub {
  width: 45%;
  background-color: #556270;
  background-image: linear-gradient(to bottom, #979799, #666766);
  border: 1px solid #1e3650;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  -webkit-text-size-adjust: none;
  mso-hide: all;
}

@media only screen and (min-width: 415px) {
  /*.container {
    grid-template-columns: 1fr;
  }*/
  .special {
    width: 550px;
    /* max-height: 436px; */
  }
  .spc-banner {
    letter-spacing: 0.25em;
    line-height: 1.75em;
    font-size: 1.25em;
  }
  .inner-container {
    margin-top: 15px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 1vmin;
  }
  .spc-image {
    height: auto;
    width: 100%;
  }
  .spc-image img {
    width: 250px;
    max-width: 100%;
    height: auto;
  }
  .spc-deals {
    height: auto;
    width: 100%;
  }
  .btn-contact {
    width: 75%;
  }
  .btn-deal {
    width: 75%;
  }
  .spc-disclaimer {
    margin-top: -15px;
    margin-bottom: 15px;
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

<div class="container">

  <div class="special">
    <div class="spc-banner">
      2017 BMW 320I XDRIVE&nbsp;SEDAN
    </div>
    <div class="spc-promo">
      Available 3.34% APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/250x167" alt="Special">
      </div>
      <div class="spc-deals">
        <div class="deals-container">
          <div>
            <span style="font-size:.8rem;">Lease for</span>
            <br>
            <span style="font-size:1.75rem;font-weight:bold;">$299</span>
            <span style="font-size:.9rem;">/mo</span><br><span style="font-size:.75rem;">for 27 mos w/$3995 down</span></div>

          <div>
            <span style="font-size:.8rem;">Zero Down Lease for</span>
            <br>
            <span style="font-size:1.75rem;font-weight:bold;">$299</span>
            <span style="font-size:.9rem;">/mo</span><br><span style="font-size:.75rem;">for 27 mos</span></div>

          <div><span style="font-size:.8rem;">Total savings</span><br><span style="font-size:1.5rem;font-weight:bold;">$5,490</span></div>

          <div><span style="font-size:.8rem;">Buy for</span><br><span style="font-size:1.5rem;font-weight:bold;">$39,955</span></div>
        </div>
      </div>
      <div class="spc-contact">
        &#128222; Call Now<br>
        <a class="btn-contact" href="tel:8005555555">(800) 555-5555</a>
      </div>
      <div class="spc-cta">
        &nbsp;<br>
        <a class="btn-deal" href="#">Get Deal</a><br> &nbsp;
        <br>
        <div class="side-by-side-btns">
          <a class="btn-sub" href="#">View Inventory</a>
          <a class="btn-sub" href="#">Value Your Trade</a>
        </div>
      </div>
    </div>
    <div class="spc-disclaimer">
      *Disclaimer - Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>
</div>

Answer 1

发生这种情况是因为您使用了填充底部的百分比：

padding-bottom: 5%;

尽管不直观，但该百分比与元素的 width 相关，而不是 height。由于宽度会发生变化，因此 5% 转换为多少像素也会发生变化。

另见

Why are margin/padding percentages in CSS always calculated against width?

和规格

<percentage> 百分比是相对于生成框的包含块的宽度计算的，即使对于 'padding-top' 和 'padding-bottom' 也是如此。

https://www.w3.org/TR/CSS2/box.html#padding-properties