Пункты меню занимали 100% высоты родителя
Как сделать, чтобы пункты меню занимали 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>
Источник: Stack Overflow на русском