Абсолютное содержимое позиции исчезает, когда скрывается div div 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

Потому что высота тела определяется в процентах. Вычисленная высота будет равна 0, пока вы не определите высоту родительскому объекту, где находится тег html.

Добавить:

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

Updated fiddle

В качестве альтернативы, вы можете использовать vh (высота окна просмотра) блок, который не зависит от высоты родителя:

body { 
    min-height: 100vh; 
} 

Поддерживаемое из версии 9 в Internet Explorer. Browser support in detail.