javascript - 扩展div时如何将所有较低的元素向下推？

Question

我有一个视频 iframe，它会在单击按钮时展开。这包含在具有 100vh 高度(全屏)的页面的标题内。当视频展开时，它会将标题中的其余内容向上推，以使所有内容在标题中垂直居中。相反，我想将 header div 的高度增加到 100vh 到 100vh 加上视频高度。但是，我目前拥有的代码无法正常工作。

LINK TO PAGE

$(document).ready(function(){
    $(".video" ).click(function() {    
        $(".header").height("+=315");
        document.getElementById("video__player").style.maxHeight = "50vw";
        
        document.getElementById("video-btn").style.display = "none";      
    });
});

.header {height: 100vh; width: 100vw;}

.header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;}
.header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;}
.video__container {text-align: center;}
.video {color: gray; width: 100%; height: auto;}
.play-btn {width: 20px; height: 20px; vertical-align: middle;}
.video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}

<div class="header" id="header">
                
                <div class="header__menu">
                    <div class="header__menu--left">
                        <div class="logo">
                            <img class="logo__full img__full" src="assets/kbd-logo-english.svg">
                            <img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg">
                        </div>
                    </div>
                    <div class="header__menu--right">
                        <div class="phone">
                            <h9 class="strong" style="color: #5CBDE1;">1-855-636-0002</h9>
                        </div>
                        <a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;">
                            <h8 class="strong" style="margin: auto;">Get your quote</h6>
                        </a>
                        <div class="language">
                            <h9 class="clickable strong" style="color: #5CBDE1;">FR</h9>
                        </div>
                    </div>
                </div>
                
                <div class="header__content">
                    <div class="header__content--container animatedParent animateOnce">
                        <h1>Hi, we're KBD Insurance.</h1>
                        <br>
                        <h2 class="text__center">Life is chaotic. Insurance doesn't have to be.</h2>
                        <br><br>
                        <div class="quote__wrapper header__quote--wrapper">
                            <a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;">
                                <h8 class="strong" style="margin: auto;">Get your quote</h6>
                            </a>
                        </div>
                        <br><br>
                        <div class="video__container animated fadeInDownShort slow">
                            <a class="h6 video clickable" id="video-btn">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
                        </div>
                        <div class="video__player" id="video__player">
                            <iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                
            </div>

Answer 1

.header__content--container 的margin 当前设置为auto。将边距更改为一些硬编码值，例如 300px，它会像您希望的那样工作。

编辑:请求的函数

function setMarginTop() {
    const $header = $(".header__content--container");
    const marginTop = $header.css("margin-top");
    $header.css("margin-top", marginTop);
}