下部のコントロール付きフルスクリーンvlc

Question

私はCSSの新機能で、スクリーンの下部にいくつかのコントロールがあるフルスクリーンのウェブページ（キオスクアプリ）にVLCを埋め込むようにしています。

あなたはどのようにCSSを書くべきか教えていただけますか？

--------------------------------------------------------- 
|div-doc            |   
|+-----------------------------------------------------+| 
|| div-vlc            || 
||              || 
||              || 
||              || 
||     MOIVE HERE       || 
||              || no y-scroll 
||              || 
||              || 
||              || 
||              || 
|+-----------------------------------------------------+| 
|+-----------------------------------------------------+| 
||div-control           || 
|+-----------------------------------------------------+| 
--------------------------------------------------------- 
        no x-scroll 
note: 1. div-doc has 2 sub-divs (div-vlc and div-control) 
     2. div-control always at bottom 
     3. background of everything should be black 

おかげでみんな

--edit 1--

body{background:black} 
#div-doc { width: 100%; height: 100% } 
#div-vlc { height: 95%} 
#div-control {height: 5%} 

しかし、DIV-docのは、100％を指定したときに、なぜ私はまだY-スクロールを取得していますか？

Answer 1

スクロールバーがウィンドウのサイズを変更する予定がない場合は、あなたが位置を使用することができます。この

body { margin:0; padding:0; overflow: hidden; } 
#div-doc { width: 100%; height: 100%; } 

Answer 2

ようなものになるだろうアウトと全ページの上にレイアウトを表示するための簡単なCSS：固定します。 divに配置して、ウィンドウに対して相対的に配置します。だから下のほとんどのdivを配置することができ、その上にVLC項目があります。

これは、コントロールがサイズ（画像ボタン）で固定的に固定されているため、正常に機能します。