使用 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
 });