屏幕缩放时按钮位置偏移求助：已尝试多种CSS方案无效

问题分析 #

当前代码里按钮位置靠固定的padding-top:6rem控制，屏幕尺寸变化时，卡片内文本高度会改变，导致按钮没法稳定在底部位置。同时wrapper的固定高度也限制了布局的灵活性。

解决步骤 #

• 把每个卡片容器（.sedan、.suv、.luxury）设为垂直flex布局，让内部元素自动分配空间
• 用margin-top:auto把按钮容器推到卡片底部，替换固定内边距
• 移除wrapper的固定高度，让布局自适应内容，同时保留响应式特性

修改后的代码 #

CSS部分 #

:root {
  --color1: hsl(31, 77%, 52%);
  --color2: hsl(184, 100%, 22%);
  --color3: hsl(179, 100%, 13%);

  --paragraphWhite: hsla(0, 0%, 100%, 0.75);
  --headingsWhite: hsl(0, 0%, 95%);

  --fontParagraph: "Lexend Deca", sans-serif;
  --fontDisplay: "Big Shoulders Display", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 15px;
  font-family: var(--fontParagraph);
  background-color: var(--headingsWhite);
  color: var(--paragraphWhite);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  /* max-width: 500px; */
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 0.5em;
  margin: 2em;
  overflow: hidden;
  /* 移除固定高度，让布局自适应 */
  max-width: 1020px;
}

.sedan,
.suv,
.luxury {
  padding: 12% 15% 12% 15%;
  /* 添加flex布局，垂直排列 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.icon {
  padding-bottom: 20px;
}

.title {
  font-family: var(--fontDisplay);
  color: var(--headingsWhite);
  font-weight: 700;
  padding-bottom: 20px;
}

.text {
  line-height: 1.6;
  font-size: 16px;
  /* 给文本添加最小高度，保持布局一致性 */
  min-height: 120px;
}

.btnBox {
  /* 移除固定padding-top，用auto margin推到底部 */
  margin-top: auto;
  padding-top: 2rem; /* 保留少量内边距，避免紧贴文本 */
}

.button {
  border: none;
  width: 120px;
  height: 35px;
  border-radius: 1em;
}

.sedan .button {
  color: var(--color1);
}

.suv .button {
  color: var(--color2);
}

.luxury .button {
  color: var(--color3);
}
.sedan {
  background-color: var(--color1);
}

.suv {
  background-color: var(--color2);
}

.luxury {
  background-color: var(--color3);
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

HTML部分（无需修改） #

<body>
    <main>
      <div class="wrapper">
        <div class="sedan">
          <img src="/images/icon-sedans.svg" alt="sedan" class="icon" />
          <h1 class="title">Sedans</h1>
          <p class="text">
            Choose a sedan for its affordability and excellent fuel economy.
            Ideal for cruising in the city or on your next road trip.
          </p>
          <div class="btnBox">
            <button class="button">Learn More</button>
          </div>
        </div>
        <div class="suv">
          <img src="/images/icon-suvs.svg" alt="" class="icon" />
          <h1 class="title">SUVs</h1>
          <p class="text">
            Take an SUV for its spacious interior, power, and versatility.
            Perfect for your next family vacation and off-road adventures.
          </p>

          <div class="btnBox"><button class="button">Learn More</button></div>
        </div>
        <div class="luxury">
          <img src="/images/icon-luxury.svg" alt="" class="icon">
          <h1 class="title">Luxury</h1>
          <p class="text">
            Cruise in the best car brands without the bloated prices. Enjoy the
            enhanced comfort of a luxury rental and arrive in style.
          </p>

          <div class="btnBox"><button class="button">Learn More</button></div>
          
        </div>
      </div>
    </main>

    <footer>
      <div class="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by <a href="#">Your Name Here</a>.
      </div>
    </footer>
  </body>

说明 #

• flex布局的margin-top:auto是让元素固定在容器底部的可靠方案，不受内容高度变化影响
• 移除固定高度后，布局在不同屏幕尺寸下更灵活，同时保持卡片视觉一致性
• 给文本添加min-height可以避免短文本卡片的按钮位置过高，维持统一布局

内容的提问来源于stack exchange，提问作者oceanotrash