![](/img/trans.png)
[英]background full screen with 100vh but be bigger if screen is minimized vertically
[英]Why 100vh is not taking the full screen?
這是我第一次遇到這種類型的問題。 我正在嘗試制作響應式導航欄。 在一定寬度下,我希望我的導航將 div 鏈接到 go 到右側欄。 但是導航鏈接 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 -
將 position 設置為固定,添加 top:0; 在媒體查詢中還有 height:100vh 和 left 或 right 為 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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.