javascript - 使用 jquery .css() 属性根据浏览器大小动态清除绝对定位的 div

Question

我正在一个网站上工作，并且有下面的代码。我想要做的是显示一个全屏绝对定位的视频，该视频采用当前浏览器的大小，然后在其下方显示内容。由于它是一个绝对位置的div，我无法清除该div，我需要获取该div的高度，然后将“margin-top”属性设置为视频下方内容的div的高度。

#bgvid {
        border: solid 4px blue;
        position: absolute; 
        right: 0; bottom: 0;
        min-width: 100%; min-height: 100%;
        overflow-y: hidden;
        width: auto; height: auto; z-index: -1;
    }
    .wrap{
        height: 500px;
        border: solid 4px black;
    }
....
....
<div id="bgvid">
<video autoplay loop>
     <source src="https://ia600400.us.archive.org/8/items/TripDownMarketStreetrBeforeTheFire/TripDownMktStreet_clean_512kb.mp4" type="video/mp4">
</video>
</div><!--end of #bgvid-->
<div class="wrap">
    <h1>lorem ipsum</h1>
</div><!-- end of .wrap-->
....
....
<script type="text/javascript">
    var bgvidheight= $('#bgvid').height();
    var styles = {'margin-top':bgvidheight};
    $('.wrap').css(styles);
</script>

因此，这会在页面加载时显示 #bgvid div 下的 .wrap div，但是当我调整浏览器大小时，.wrap div 的位置保持在加载时放置的位置，我需要重新加载才能将其放入视频下方的正确位置，显然是因为脚本会在每次页面加载时运行。

当有人在手机或平板电脑上打开页面时这很好，但如果有人调整浏览器的大小，在他们重新加载之前它看起来很奇怪。

所以我的问题是，是否有办法不断获取 #bgvid div 的高度以输入到 jquery 中？

Answer 1

尝试

$(window).resize(function(){ 
    var height = $('#bgvid').height();
    //do stuff with the height
 });