如何修复一个隐藏的导航，这是溢出的主要部分？
如何修复一个隐藏的导航，这是溢出的主要部分？
提问于 2019-06-02 23:34:34
我的隐藏导航本应留在主页面下方，但在向下滚动页面时却溢出了。
我已经将我的主要部分设置为min-height: 100vh，带有背景色和z索引，所以我不明白为什么它还在外溢。
nav {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
background-color: #ff5000;
color: #fbf9f9;
font-family: "Anx Regular";
font-size: 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
main {
position: relative;
z-index: 1;
background-color: #fbf9f9;
min-height: 100vh;
transition: transform 0.8s;
}
main.open {
transform: translate(-300px, 0);
}const toggleTag = document.querySelector("a.toggle-nav")
const mainTag = document.querySelector("main")
toggleTag.addEventListener("click", function() {
mainTag.classList.toggle("open")
if (mainTag.classList.contains("open")) {
toggleTag.innerHTML = `<img src="close.svg">`
toggleTag.style.width = "30px"
} else {
toggleTag.innerHTML = `<img src="menu.svg">`
toggleTag.style.width = "30px"
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-03 00:27:13
这是因为<main>中的<section class="crit1">标签有css height: 100vh。这似乎缩短了这一部分。我不知道还会在哪里使用它，但只要删除该规则就可以解决它。如果这条规则在其他地方很重要，您可能还可以做一些更具体的事情，比如section.crit1, section.crit1 section { height: auto; }。
Stack Overflow用户
发布于 2019-06-03 00:24:04
100vh意味着它显示窗口的全高(比如800px )，所以它不是你解决问题所需要的。您可以设置一个位置:固定到导航，这样即使您向下滚动，它也始终位于屏幕的右上角。如果您需要在页面顶部显示它，请尝试切换到绝对位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56416473
复制相关文章
相似问题