Пункты меню занимали 100% высоты родителя

Рейтинг: 0Ответов: 1Опубликовано: 12.03.2023

введите сюда описание изображения

Как сделать, чтобы пункты меню занимали 100% высоты родителя?

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.header__container {
  min-height: 70px;
  max-width: calc(1100px - 20px);
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px dashed green;
}

.navbar__list {
  display: flex;
  gap: 10px;
}

.navbar__list {
  align-self: stretch;
}

.navbar__link {
  display: inline-block;
}

.header__brand {
  display: inline-block;
  color: black;
}

.header__brand:hover {
  background-color: black;
  color: white;
}

.navbar__link:hover {}
<header class="header">
  <div class="header__container">
    <a class="header__brand" href="#">Blog</a>
    <nav class="header__navbar navbar">
      <ul class="navbar__list">
        <li class="navbar__item">
          <a class="navbar__link" href="#">Your Posts</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Create</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Profile</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Exit</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Ответы

▲ 0

Как сделать, чтобы пункты меню занимали 100% высоты родителя?

Например просто их "растянуть" по высоте...

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.header__container {
  min-height: 70px;
  max-width: calc(1100px - 20px);
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px dashed green;
}

/* Вот моя вставка */
.header__container > * {
  align-self: stretch;
  /* это для демонстации */
  background: green;
}

.navbar__list {
  display: flex;
  gap: 10px;
}

.navbar__list {
  align-self: stretch;
}

.navbar__link {
  display: inline-block;
}

.header__brand {
  display: inline-block;
  color: black;
}

.header__brand:hover {
  background-color: black;
  color: white;
}

.navbar__link:hover {}
<header class="header">
  <div class="header__container">
    <a class="header__brand" href="#">Blog</a>
    <nav class="header__navbar navbar">
      <ul class="navbar__list">
        <li class="navbar__item">
          <a class="navbar__link" href="#">Your Posts</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Create</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Profile</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Exit</a>
        </li>
      </ul>
    </nav>
  </div>
</header>