Question

这是我在这里的第一篇文章，但我找不到我的问题的答案。

我正在构建一个页面，并且我希望一张图片充满整个屏幕，从顶部导航栏（菜单等）的底部到屏幕底部。我唯一遇到的问题是...响应栏是响应的：它在非常大的屏幕上较高，而在手机上较小，这当然会在不同屏幕上对我的背景图像产生不同的影响。

这是我的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)

以此类推...这是一家shopify商店，我对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();
  }

全屏背景图像减去灵活的顶部导航栏

0 个答案: