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

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

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

所以我的问题是，是否有一种方法可以不断地获得#bgvid-div的高度，并将其输入jquery？

Answer 1

尝试

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