Silverlightのスクリーンショットを模倣するCSS

Question

私は確かに質問が尋ねられ、答えられたと確信しています。私はどこでどのように検索するかを知るためにHTMLとCSSをよく知りません。どんな助けもありがとう。

私は、Silverlightで構築されたコミュニティのアプリケーションを持っている：http://www.scalerailsonline.com/default.aspx

は、最終的にはマイクロソフト私は最初からそれを書き換えてるチャックを与えることを決めました。の90％はかなり簡単です。私はアプリのチャット部分を達成するためにHTMLとCSSに苦労しています。

私は何をしようとしているかを示すスクリーンショットをマークアップしました。

主な目標は、利用可能なスペースに合わせて伸縮し、スクロール可能なコンテナを作成することです。

まず、ブラウザウィンドウに収まるようにWebページを拡大または縮小したいと考えています。

2番目の右の列はコンテンツに合わせて水平に展開され、下部の領域はチャットエントリコントロールに合わせて縦方向に拡張されます。

ページがブラウザに適合し、スペースが右と下にコミットされたら、コンテナを収めたいです。コンテナ内のコンテンツが多すぎる場合（時間の99％）、垂直スクロールバーが表示されます。

私はすべての種類の幅/高さの組み合わせを試しました：100％。しかし、それはちょうどその領域をブラウザの100％に制限するのではなく、内容に合わせて大きくするように思えます。

divを「高さ：200％;オーバーフロー：スクロール」に設定すると、スクロールバーが表示されます。しかし、私はちょうど利用可能なスペースだけに拡大するdivを得ることができるようではありません。

Answer 1

最初に、ブラウザウィンドウに収まるようにWebページを拡張または縮小したいと考えています。

これは、のマージンをautoに設定することで実現できます。これを試してみてください -

.center { 
    margin: 0 auto; 
    padding: 0; 
    float: none; 
} 

Answer 2

答えは次のとおりです。本当に良い答えがイマイチ。 screen要素の高さに基づいてボックスの高さを設定するJavaスクリプトリサイズイベントへのリゾート。