jquery - 兄弟div隐藏时绝对位置内容消失

Question

所以我正在构建一个具有欢迎屏幕的网站，然后当您进入时它会播放一段视频。在欢迎屏幕上，有一个问候语和一个“开始”按钮，单击“开始”按钮会关闭欢迎界面并播放视频。这是我工作的基本内容:

http://jsfiddle.net/johnmorrow/ua5Lvme8/5/

<video muted id="mainvideo">
        <source src="https://s3-us-west-2.amazonaws.com/thepapertrail/prototype/shortvideo.mp4" type="video/mp4">Your browser does not support HTML5 video.</video>
    <div class="overlay" id="welcome-overlay">
        <div class="container above-overlay">
            <div class="row vertical-center">
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
                    <p>weclome to</p>
                     <h1>The Title Area</h1>

                    <p>more info here and then a link <a href="http://google.com">Here</a>
                    </p>
                    <p><a class="btn btn-primary btn-lg" href="#" role="button" onclick="entersite()">Begin</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

然后

function entersite() {
    $("#welcome-overlay").fadeOut(1500);
    var video = $("#mainvideo");
    video[0].play()
}

但是，存在这个问题，当叠加层消失时，视频也会消失。我认为它与绝对定位有关，当没有同级内容时，尺寸都搞砸了。

这是正在发生的事情吗？我该如何解决这个问题？

Answer 1

因为 body 的高度以百分比定义。计算出的高度将为 0，直到您为父级定义高度，这里是 html 标记。

添加:

html {
    height: 100%;  // This is the root tag => 100% of viewport's height
}

Updated fiddle

或者，您可以使用 vh(视口(viewport)的高度)单位，它不依赖于父级的高度:

body {
    min-height: 100vh;
}

从 Internet Explorer 版本 9 开始支持。 Browser support in detail .