Полноэкранное фоновое изображение за вычетом гибкой верхней навигационной панели - PullRequest
Новая
       7

Полноэкранное фоновое изображение за вычетом гибкой верхней навигационной панели

0 голосов
/ 07 сентября 2018

Это мой первый пост здесь, и я не смог найти ответ на свой вопрос.

Я создаю страницу и хочу, чтобы изображение заполняло весь экран, от нижней части верхней навигационной панели (меню и т. Д.) До нижней части экрана. Единственная проблема, которая у меня есть ... полоса отзывчива: она выше на очень большом экране и намного меньше на мобильных устройствах, что, конечно, по-разному влияет на мое фоновое изображение на разных экранах.

Вот мой css: 

.backgroundimage{ 
    background-image: url(https://file...);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    background-position: center center;
    position: relative;
    }

</style>

Итак, я пытался многократно использовать вещи в течение нескольких часов, играя со свойством "vh". Например: 

min-height:calc(100vh - 17vh)

Это дает достойный результат на моем ноутбуке, но не на большом экране. Поэтому я пытался найти функцию или класс, представляющий navHeight, но я не могу найти правильный способ сделать это, и пока ничего не работает. Я пробовал такие вещи, как: 

 min-height:calc(100vh - $headerHeight)

И так далее ... Это магазин, где я делаю покупки, и у меня нет знаний по js, что может объяснить, почему я борюсь. Вот некоторый js-код, который вращается вокруг заголовка, но нигде не могу найти способ удалить высоту заголовка. Любая идея или направление, чтобы дать мне? Спасибо.

код JS (не в правильном порядке): 

theme.headerNav = (function() {
  var selectors = {
    siteNav: '#SiteNav',
    siteNavCompressed: '#SiteNavCompressed',
    siteNavParent: '#SiteNavParent',
    siteNavItem: '.site-nav__item',
    stickyNavWrapper: '#StickNavWrapper',
    stickyNav: '#StickyNav'
  };

function init() {
    sizeNav();
    initMegaNavs();
    initHeaderSearch();
    $(window).on('resize.headernav', $.debounce(250, sizeNav));
  }

window.Meganav = (function() {
  var Meganav = function(options) {
    this.cache = {
      $document: $(document),
      $page: $('.page-element')
    };

    var defaults = {
      $meganavs: $('.meganav'),
      $megaNav: $('.meganav__nav'),
      $meganavToggle: $('.meganav-toggle'),
      $meganavDropdownContainers: $('.site-nav__dropdown-container'),
      $meganavToggleThirdLevel: $('.meganav__link-toggle'),
      $meganavLinkSecondLevel: $('.meganav__link--second-level'),
      $meganavLinkThirdLevel: $('.meganav__link--third-level'),
      $meganavDropdownThirdLevel: $('.site-nav__dropdown--third-level'),
      isOpen: false,
      preventDuplicates: false,
      closeOnPageClick: false,
      closeThirdLevelOnBlur: false,
      activeClass: 'meganav--active',
      drawerClass: 'meganav--drawer',
      meganavDropdown: '.site-nav__dropdown',
      meganavLinkClass: 'meganav__link',
      drawerToggleClass: 'drawer__nav-toggle-btn',
      drawerNavItem: '.drawer__nav-item',
      navCollectionClass: 'meganav__nav--collection',
      secondLevelClass: 'meganav__link--second-level',
      thirdLevelClass: 'meganav__link-toggle',
      thirdLevelContainerClass: 'site-nav__dropdown--third-level',
      noAnimationClass: 'meganav--no-animation'
    };

theme.HeaderSection = (function() {
  function Header() {
    theme.stickyHeader.init();
    theme.headerNav.init();
    theme.Notify = new window.Notify();
    theme.NavDrawer = new window.Drawers('NavDrawer', 'left');
    drawerSearch();
  }
...