页面不会正确调整大小，同时有一个粘性的Nav。

Question

我正在设计一个网页，需要有一个主要的Nav是粘性的。我可以这样做，但是当我这样做时，当浏览器窗口被调整大小时，页面将不再正确地调整大小。它突然在页脚下面有一个很长的空白。但是，如果我尝试删除页面的“高度”属性，粘性导航就不再是粘性的。我已经看过我的代码几次了，但似乎找不到相关的地方。我提供了一些截图和代码。任何帮助或推动正确的方向将不胜感激！

  /* site page */

#colocation_new {
  position: relative;
  width: 1920px;
  height: 4652px;
  background-color: white;
  overflow: visible;
  --web-view-name: colocation new;
  --web-view-id: colocation_new;
  --web-scale-to-fit: true;
  --web-scale-to-fit-type: width;
  --web-scale-on-resize: true;
  --web-enable-deep-linking: true;
}


/* Main Nav */

#Main_Nav {
  position: sticky;
  width: 1920px;
  height: 112px;
  left: 0px;
  top: 0px;
  overflow: visible;
  z-index: 1;

粘性Nav

长白空间

Answer 1

刚刚在一个空白HTML页面上尝试了您的代码，看起来您的Nav最终出现在页面的底部。

您可以通过两种不同的方式解决这个问题：

1. 将#colocation_new位置更改为absolute。

或

1. 将#main_nav位置更改为fixed。

Answer 2

希望这能帮助

/*网站页*/

#colocation_new {
        position: relative;
        width: 1920px;
        height: 4652px;
        background-color: white;
        overflow: visible;
        --web-view-name: colocation new;
        --web-view-id: colocation_new;
        --web-scale-to-fit: true;
        --web-scale-to-fit-type: width;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
    } 
/* Main Nav */


#Main_Nav {
    position: fixed;
    width: 100%;
    top: 0px;
    overflow: visible;
    z-index: 1;