页面无法正确调整大小并同时具有粘性导航

Question

我正在设计一个需要让主导航具有粘性的页面。我可以这样做，但是当我这样做时，当浏览器 window 调整大小时，页面不再正确调整大小。它的页脚下方突然有一个长长的空白 space 。但是，如果我尝试删除页面的高度属性，则粘性导航不再粘性。我已经检查了我的代码几次，但似乎无法找到相关性在哪里。我提供了一些屏幕截图以及我的代码。任何帮助或推动正确的方向将不胜感激！

  /* 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;

Sticky Nav

Long White Space

Answer 1

希望对您有所帮助

/* 站点页面 */

#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;

Answer 2

刚刚在空白 HTML 页面上尝试了您的代码，看起来您的导航最终位于页面底部。

您可以通过两种不同的方式解决它：

将您的 #colocation_new 位置更改为 absolute。

或

将您的 #main_nav 位置更改为 fixed。

页面无法正确调整大小并同时具有粘性导航

Page won't resize correctly and have a Sticky Nav at the same time

html

css

sticky

responsive-design