css/htmlを使ってdivのサイズを変更しましたが、キャッチがあります

Question

私が作業しているページには、その幅に渡るdivがあります。その高さは、ブラウザウィンドウに従ってサイズを変更する必要があります。ここで私は今のところそれを持っている方法は次のとおりです。ページの下部にある

#vid_window{ position:absolute; float:left; background-color:#000; width:100%; height:57%; margin-left:auto; margin-right:auto; overflow:hidden; }

は、上記のdivにビデオの品揃えを再生するには「メニュー」、およびビデオです、もちろん、持っていますdivの高さでサイズを変更します。 divは、クライアントごとに完全に配置されます。それは#vid_window

を埋めれるようにここで問題だ

#vid{width:100%;height:100%:}

：ブラウザのページをリサイズするとき、それはVIDウィンドウを重ね始めるために「メニュー」のために時間はかかりません。それは問題ではありません。私はパーセンテージを減らすことができますが、私はかもしれない、クライアントごとではありません。彼らは、ページのライオンのシェアがビデオを表示できるようにしたいと思いますが、もちろん、メニューはウィンドウやVIDと重なり合わないようにしています。

ここに質問があります：ブラウザウィンドウに従ってvid_windowとvidのサイズを指数関数的に変更する方法があります。ウィンドウが完全に展開されている場合、vid_windowは57％ですが、ハーフサイズの場合はvid_windowは、例えば30％でしょうか？あなたがしたい場合はここで

は、ページへのリンクです：

page

Answer 1

あなたが説明したものから、あなたは絶対に一番下にメニューを配置したほうが良いと思いますように、それが鳴り、 vid_windowの相対的な位置付けを使用します。ちょっとしたJavaScriptを使うと、正しくサイズを変更でき、オーバーラップの問題を解決するはずです。あなたがそれを使用することが許されているなら、jQueryを使って素早く処理することができます。

Answer 2

Jamesさんのように、Div vid_windowのクラスを設定してクラスの高さ％を設定し、ディスプレイのウィンドウサイズを確認して最適な設定を決定します。また、ページがその高さを下回らないように、そしてModernizrの下位互換性のために、おそらくmin-heightを設定します。 http://www.modernizr.com/

------ EDIT ------

ヘッダーとフッターがページの外になることはありませんこと。彼らは最小高さの値は、あなたが適切だと思うものは何でもすることができ、本体の高さ

html,body { height:99%; min-height: 100%; } 
header { height:22%; min-height: 100px; } 
#content { height: 56%; min-height: 200px; } 
footer { height:21%; min-height: 100px; } 

に合わせて拡張するように、あなたが持っている問題を軽減する一つの方法は割合にヘッダとフッタに高さを設定していますあなたが行きたいと思う最も小さい高さのために。残りのパーセンテージの高さは、ヘッダーフッターとその結果としてあなたのコンテンツを自動的に拡大縮小する必要があります。ただし、これにより、ある特定のポイントでページから外れるように強制されます（すべての最小幅が満たされ、ブラウザウィンドウが縮小し続ける）。私はこれが望ましいと思うし、お客様のニーズを満たす必要があります。そうでなければ、各ブラウザがパディングと高さの計算をどのように扱うかという理由で、常に正しい計算を行うつもりはない、非常に複雑なJavaScriptになるでしょう。その上にjavascriptを無効にすると、それはうまくいかないでしょう。