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:[phone]">
        <i class="fas fa-phone-alt"></i> [phone]
      </a>
      |
      <a href="email:[e-mail]">
        <i class="fas fa-envelope"></i> [e-mail]
      </a>
    </div>
    <div class="appointment">
      <button class="btn">
                Make an appointment
            </button>
    </div>
  </div>

</header>

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

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

标签： htmlcssflexbox

Answer 1

您可以使用“flex”属性展开弹性项目：（https://css-tricks.com/almanac/properties/f/flex/）

如果您希望按钮具有容器的高度，一种方法是在容器上设置固定高度，然后您可以在按钮上使用 height: 100% （确保考虑到填充）。