Question

我的隐藏导航（应保留在主要部分下）在向下滚动页面时溢出。

我将我的主要部分设置为min-height：100vh，具有背景色和z-index，因此我不明白为什么这仍然会溢出。

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"
  }

https://anx.superhi.com/workshops.html

Answer 1

100vh表示显示窗口的全高（例如800px），所以这不是您所需要的，可以解决您的问题。您设置了一个位置：固定在导航上，因此即使您向下滚动它也始终位于屏幕的右上角。如果您只需要在页面顶部显示它，请尝试切换到绝对位置。

Answer 2

这是因为<section class="crit1">中的<main>标记具有css height: 100vh。这似乎正在缩短该部分。我不知道这是在什么地方使用，但只要删除该规则即可解决。如果该规则在其他地方很重要，您也可以做一些更具体的事情，例如section.crit1, section.crit1 section { height: auto; }。

如何修复隐藏在主要部分下的隐藏导航？

2 个答案: