どのようにCSSの高さをブラウザウィンドウのサイズに合わせるのですか？

Question

これで高さがブラウザウィンドウの100％になるようにビデオを配置したいので、ビデオの高さは1080px（スクロールバー付き）ではなくブラウザウィンドウの高さに対する高さです。ここ は、（それが動作します）私の現在のスタイリングです：

video { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    height: 100%; 
} 

私はそれが次のようになりたいのですが：パディングなしスクロールバーを--Meaningない

。私は、ビューポートの高さのCSSプロパティを試してみましたが、それはスクロールバーを引き起こします。前述のコードは、私が探している結果を得ていますが、このような単純なことを行うのは非常に非効率的な方法です。他のブラウザでも同じ方法を表示するかどうかはわかりません。ここにはlive ...
JavaScriptの代替品はありますか？またはより良いまだ純粋なCSS？

Answer 1

Alohci私は彼とScott MarcusとTimothyから他の回答からの助けを借りて、スクロールバーを削除するためにvertical-align: top;を使用する必要があることを説明しました。受け取ったすべての回答は役に立ちましたが、hereと表示された最終回答に寄与しました。
だから、私の以前 CSS：

body { 
    background-color: #000000; 
} 

video { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    height: 100%; 
} 

そして、私の新しい CSS：

body { 
    background-color: #000000; 
    margin: 0; 
    text-align: center; 
} 

video { 
    vertical-align: middle; 
    height: 100vh; 
} 

Answer 2

ドキュメントの通常のフローにおける要素の高さの割合は、祖先要素の高さが確定的に設定されている場合にのみ機能します。

しかし、そのすべてをスキップするには、ビューポートの高さを100％に設定します。

height:100vh; 

Answer 3

は、あなたが100％を使用し、真の100％の高さと幅を取得することができますボディとHTMLタグをリセットします。

html, body { 
 
width: 100%; 
 
height: 100%; 
 
margin: 0; 
 
padding: 0; 
 
    
 

 
      } 
 
#fullscreen-video{ 
 
    width:100%; 
 
height:100%; 
 
    background-color:green; 
 
    overflow:hidden; 
 
}

<div id="fullscreen-video"> 
 
<iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/A3PDXmYoF5U" frameborder="0" allowfullscreen></iframe> 
 
</div>