javascript - Div 动态调整为窗口高度，但在将更多内容添加到 HTML 时失败

Question

我有一个 site使用我的客户想要完全填充窗口的 HTML5 视频(类似于 this site ).我使用 CSS(object-fit: cover、width: 100%)和 JQuery(容器部分的高度设置为窗口高度，在窗口调整大小时重置)完成了此操作。效果很好。

但是当我在视频下方添加另一个包含文本的部分元素时(同样，类似于上面链接的站点)，就好像 JQuery 根本不存在一样。视频容器部分的高度大于应有的高度，但不是默认的视频高度。此外，带有文本的新部分被放在视频后面，因此它可能只显示一半。

这是怎么回事？很明显，新部分在某种程度上打乱了窗口高度计算，但我不知道为什么或如何修复它。

$(document).ready(function() {

  // Get window dimensions

  var winWidth = $(window).width();
  var winHeight = $(window).height();
  var winRatio = winWidth / winHeight;

  console.log("The window height is: " + winHeight);
  console.log("The window width is: " + winWidth);
  console.log("The window ratio is: " + winRatio);

  // Get window dimensions again upon resize

  $(window).resize(function() {

    winWidth = $(window).width();
    winHeight = $(window).height();

    console.log("The window height is: " + winHeight);
    console.log("The window width is: " + winWidth);

  });

  // Get video height (width will always be equal to window width)

  var vidHeight = $("#home-video").height();
  console.log("The video height is: " + vidHeight);

  // Get video height again upon resize

  $(window).resize(function() {

    vidHeight = $("#home-video").height();

    console.log("The video height is: " + vidHeight);

  });

  // If screen is at least 992px wide (most desktops), load video with page

  if (winWidth > 992) {
    $("video#home-video").attr("preload", "auto");
  }

  sizeToWindow(vidHeight, winHeight);

  $(window).resize(function() {
    sizeToWindow(vidHeight, winHeight);
  })

});

function sizeToWindow(vidHeight, winHeight) {

  // If screen height and header-vid section height are not equal, set section height to window height to fill screen

  if (winHeight !== vidHeight) {
    var heightString = winHeight.toString();
    heightString = heightString.concat("px");
    $("#header-vid").css({
      "height": heightString
    });
  }
}

main {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
main section.full-width {
  width: 100%;
  margin: 0;
  padding: 0;
}
main .video-container {
  margin: 0;
  padding: 0;
  background-image: url("/resources/img/atlanta-skyline.jpg");
  background-image: url("/resources/img/atlanta-skyline.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
main video#home-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 991px) {
  main video#home-video {
    opacity: 0;
  }
}
main h1.overlaid-text {
  font-family: Merriweather, serif !important;
  position: absolute;
  color: white;
  font-size: 5em;
  top: 20%;
  left: 30%;
  opacity: 0.9;
}
main section#vision-container {
  background: #f7a11a;
  background: #f7a11a;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<main>
  <section class="full-width full-height video-container" id="header-vid">
    <video autoplay loop preload="none" poster="/resources/img/atlanta-skyline.jpg" id="home-video">
      <source src="/resources/vid/main-vid.mp4" type="video/mp4">
    </video>
  </section>
  <section class="full-width" id="vision-container">
    <h3>Within the next 5 years, we will grow to originate $400 million dollars a month in purchase money mortgages across 20 markets in the United States. In those markets we will be recognized as innovators of mortgages processing, supporteres of consumer transparency while maintaining our reputation as the mortgage bank with the highest employee satisfation among our peers.</h3>
  </section>
</main>

Answer 1

我强烈建议去掉 <main>和 <section>标签，因为它们对 video 不友好标签。正如您在此片段中看到的那样，我用简单的 divs 对其进行了修改，而且效果很好。

$(document).ready(function() {

  // Get window dimensions

  var winWidth = $(window).width();
  var winHeight = $(window).height();
  var winRatio = winWidth / winHeight;

  console.log("The window height is: " + winHeight);
  console.log("The window width is: " + winWidth);
  console.log("The window ratio is: " + winRatio);

  // Get window dimensions again upon resize

  $(window).resize(function() {

    winWidth = $(window).width();
    winHeight = $(window).height();

    console.log("The window height is: " + winHeight);
    console.log("The window width is: " + winWidth);

  });

  // Get video height (width will always be equal to window width)

  var vidHeight = $("#home-video").height();
  console.log("The video height is: " + vidHeight);

  // Get video height again upon resize

  $(window).resize(function() {

    vidHeight = $("#home-video").height();

    console.log("The video height is: " + vidHeight);

  });

  // If screen is at least 992px wide (most desktops), load video with page

  if (winWidth > 992) {
    $("video#home-video").attr("preload", "auto");
  }

  sizeToWindow(vidHeight, winHeight);

  $(window).resize(function() {
    sizeToWindow(vidHeight, winHeight);
  })

});

function sizeToWindow(vidHeight, winHeight) {

  // If screen height and header-vid section height are not equal, set section height to window height to fill screen

  if (winHeight !== vidHeight) {
    var heightString = winHeight.toString();
    heightString = heightString.concat("px");
    $("#header-vid").css({
      "height": heightString
    });
  }
}

.overlay {
    position:absolute;
    bottom:0;
    left:0;
    z-index:1;
}
.main {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.main .section .full-width {
  width: 100%;
  margin: 0;
  padding: 0;
}
.main .video-container {
  margin: 0;
  padding: 0;
  background-image: url("http://georgiainfo.galileo.usg.edu/images/uploads/gallery/atlanta1976.jpg");
  background-image: url("http://georgiainfo.galileo.usg.edu/images/uploads/gallery/atlanta1976.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.main video#home-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 991px) {
  main video#home-video {
    opacity: 0;
  }
}
.main h1.overlaid-text {
  font-family: Merriweather, serif !important;
  position: absolute;
  color: white;
  font-size: 5em;
  top: 20%;
  left: 30%;
  opacity: 0.9;
}
.main section#vision-container {
  background: #f7a11a;
  background: #f7a11a;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="main">
  <div class="section full-width full-height video-container" id="header-vid">
    <video autoplay loop preload="none" poster="http://georgiainfo.galileo.usg.edu/images/uploads/gallery/atlanta1976.jpg" id="home-video">
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
  </div>
   <div class="section full-width overlay" id="vision-container">
    <h3>Within the next 5 years, we will grow to originate $400 million dollars a month in purchase money mortgages across 20 markets in the United States. In those markets we will be recognized as innovators of mortgages processing, supporteres of consumer transparency while maintaining our reputation as the mortgage bank with the highest employee satisfation among our peers.</h3>
  </div>
</div>