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

因为身体的高度以百分比定义。计算出的高度将为0，直到您为父项定义高度，此处为html标记。

添加：

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

<强> Updated fiddle

或者，您可以使用vh（视口的高度）单位，该单位不依赖于父亲的身高：

body {
    min-height: 100vh;
}

Internet Explorer中的版本9支持。 Browser support in detail

当隐藏兄弟div时，绝对位置内容会消失

1 个答案: