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

jumbotron里面有一个背景图片和一个div（#notice），里面会浮动一些文字。我希望div在标题后占用所有剩余的视口空间。我设法使用以下CSS将jumbotron div作为视口的高度减去标题：

height:calc(100vh - 155px);

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

有没有办法设置CSS使用动态标头的计算？如果没有，我是否需要使用某种jquery或javascript？如果是这样，我会非常感谢一些相当详细的指示。

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

提前谢谢你：）

Answer 1

因为你不能轻易地知道每个设备中标题的高度，因为它是高度的百分比......而且因为它取决于一大堆CSS规则形成BootStrap和你的Wordpress主题......你只会测量它以扣除剩余空间。

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

如何将div（#jumbotron）设置为视口的高度减去动态切换的另一个div（#header）的高度

1 个答案: