html - 将按钮设置为蓝色条的大小？

Question

.nav-info {
  height: auto;
  background-color: darkblue;
  color: white;
  padding: 1em;
  padding-left: 5%;
  flex-direction: row;
  justify-content: space-between;
}

.flexbox {
  display: flex;
}

.info a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.8px;
}

.appointment {
  height: 100%;
}

.btn {
  color: white;
  background-color: skyblue;
  font-weight: bold;
  border: none;
}

<header>
  <div class="nav-info flexbox">
    <div class="info flexbox">
      <a href="tel:+1 (786) 859-7101">
        <i class="fas fa-phone-alt"></i> +1 (786) 859-7101
      </a>
      |
      <a href="email:info@gemfs.company">
        <i class="fas fa-envelope"></i> info@gemfs.company
      </a>
    </div>
    <div class="appointment">
      <button class="btn">
                Make an appointment
            </button>
    </div>
  </div>

</header>

我需要按钮覆盖整个高度。我正在使用 flexbox，我不知道这是否会影响 div 的大小。我已经尝试了很多东西，但我不知道如何解决它。我想做的不是导航栏。 另一方面，电话和email的信息非常接近，有没有办法用flexbox补救？

我希望它看起来像这样，但底部是天蓝色。我需要按钮来获取所有高度。

Answer 1

您应该为栏设置固定高度并应用 {alight-items: stretch}。

.nav-info {
        height: auto;
        background-color: darkblue;
        color: white;
        padding: 0 5%;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        height: 50px;
    }

    .flexbox {
        display: flex;
    }
    .separator {
      display: inline-block;
      padding: 0 10px;
      margin-left: -2px;
    }
    .info {
        align-items: center;
    }

    .info a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            letter-spacing: 0.8px;
        }
     
    .appointment {
        align-items: stretch;
    }
    
    .btn {
        color: white;
        background-color: #02AC1F;
        font-weight: bold;
        border: none;
        height: 100%;
        padding: 0 20px;
    }

<header>
    <div class="nav-info flexbox">
        <div class="info flexbox">
            <a href="tel:+1 (786) 859-7101">
                <i class="fas fa-phone-alt"></i> +1 (786) 859-7101
            </a>
            <span class="separator">|</span>
            <a href="email:info@gemfs.company">
                <i class="fas fa-envelope"></i> info@gemfs.company
            </a>
        </div>
        <div class="appointment flexbox">
            <button class="btn">
                Make an appointment
            </button>
        </div>
    </div>
    
</header>