问题描述
这是我第一次遇到此类问题。我正在尝试制作响应式导航栏。在一定的宽度,我希望我的导航链接 div 转到右侧栏。但是即使在提供 100vh 之后,导航链接 div 也没有占据完整的视口高度。这是代码 -
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;
}
}
https://codepen.io/yell0wflash/pen/JjWGwJa
解决方法
设置位置为固定,添加top:0;在媒体查询中也有 height:100vh 和 left 或 right to 0
,高度为 100vh,但您已设置 align-items:center
,因此该元素偏移以与其他 flex 元素对齐。
添加
header nav {
align-items: flex-start;
}
到您的媒体查询
现在,由于您的 nav
元素具有填充,您需要使用
height: calc(100vh - 16px);
,
这是因为您有 align-items:center; 根据媒体查询更改此设置。
@media screen and (max-width: 768px) {
header nav {
align-items:unset;
}
}