Я впервые сталкиваюсь с подобной проблемой. Пытаюсь сделать панель навигации отзывчивой. При определенной ширине я хочу, чтобы мой div ссылок навигации перешел на правую боковую панель. Но div навигационных ссылок не занимает полную высоту области просмотра даже после предоставления 100vh. Вот код -
HTML
<header>
<nav>
<div class="logo">Logo</div>
<div class="nav-items">
<li><a href = '#'>Link-1</a></li>
<li><a href = '#'>Link-2</a></li>
<li><a href = '#'>Link-3</a></li>
</div>
</nav>
</header>
SCSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background: blue;
nav {
height: 65px;
max-width: 1340px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
padding: 1rem;
.logo {
font-size: 2rem;
color: black;
}
.nav-items {
li {
display: inline;
a {
color: black;
text-decoration: none;
margin-left: 2rem;
}
}
}
}
}
@media screen and (max-width: 768px) {
header nav .nav-items {
position: absolute;
right: 0;
height: 100vh;
width: 50%;
border: 1px solid black;
}
}
Ссылка на codepen -