javascript - 如何设置一个 div (#jumbotron) 是视口(viewport)的高度减去动态变化的另一个 div (#header) 的高度

Question

背景/技能:我开始使用 bootstrap 4(第一次使用 bootstrap)测试自定义 Wordpress 主题。我对 HTML 和 CSS 有基本的了解，但是对于较新的 CSS 和任何 jQuery 或 javascript，我相当无能，通常只是破解我在网上找到的代码来尝试让它为我工作，对如何/为什么知之甚少如果我成功了，它就会起作用。

遗漏了一堆页面标题信息链接到脚本和我确实理解的东西的链接可能最终会影响任何建议的方法，只是为了保持简单。到目前为止，我有以下 HTML:

<div id="page" class="site">
  <div id="header" class="container-fluid">
    <div id="masthead" class="site-header row row-eq-height">
      <div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
      <!--logo-->
      <div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
      <!--fruits-->
      <div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
      <!--social-->
    </div>
    <!-- #masthead -->
  </div>
  <!--header-->
  <div id="jumbotron" class="row">
    <div id="notice" class="align-self-center col-md-3"></div>
  </div>
  <!--jumbotron-->
  <div id="content" class="site-content"></div>
  <!-- #content -->
  <div id="footer" class="container-fluid">
    <footer id="colophon" class="row"></footer>
    <!-- #colophon -->
  </div>
  <!--footer-->
</div>
<!-- #page -->

超大屏幕有一个背景图像和一个内部的 div (#notice)，它会 float 到左边，里面有一些文本。我希望 div 在标题之后占用所有剩余的视口(viewport)空间。我已经设法让 jumbotron div 成为视口(viewport)的高度减去标题使用以下 CSS:

height:calc(100vh - 155px);

但这只有在我知道标题的高度是 155px 时才有效。实际上，它会根据不同的屏幕宽度和内容而变化。

有没有办法将 CSS 设置为使用动态 header 的计算？ 如果没有，我需要使用某种 jquery 或 javascript 吗？如果是这样，我将非常感谢一些相当详细的说明。

注意:作为解决方案，我不希望#jumbotron 成为页面的高度并位于页眉 div 后面，因为背景图像显示很重要。

提前谢谢你:)

Answer 1

由于您无法轻易知道每个设备中 header 的高度，因为它是高度的百分比...并且因为它取决于来自 BootStrap 和您的 Wordpress 主题的大量 CSS 规则...您只会测量它以扣除剩余空间。

<script>
$(document).ready(function(){
  function adjustJumbotronHeight(){
    var headerHeight = $("#header").outerHeight();
    var viewportHeight = $(window).innerHeight();

    var remains = viewportHeight - headerHeight;

    $("#jumbotron").css({"height":remains});
  }

  // On page load
  adjustJumbotronHeight();

  // On resize (or mobile orientation change)
  $(window).on("resize",function(){
    adjustJumbotronHeight();
  });
});
</script>