Страница не будет правильно изменять размер и в то же время будет иметь Sticky Nav

Question

Я работаю над дизайном страницы, для которой главное меню должно быть «липким». Я могу это сделать, но когда я это сделаю, страница больше не будет правильно изменять размер при изменении размера окна браузера. Внезапно под нижним колонтитулом появляется длинное пустое пространство. Но если я попытаюсь удалить свойство высоты страницы, липкая навигация больше не будет липкой. Я просматривал свой код несколько раз, но не могу найти, где находится корреляция. Я предоставил несколько скриншотов, а также свой код. Приветствуется любая помощь или pu sh в правильном направлении!

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

Просто попробовал ваш код на пустой странице HTML, и похоже, что ваш Nav оказался внизу страницы.

Вы можете решить это двумя разными способами:

1. Измените свою #colocation_new позицию на absolute.

OR

Измените свою #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;