固定レイアウトのフッター、固定幅の右列、残りの部分はCSSレイアウトを使用して左列を取得するにはどうすればよいですか？

Question

私の問題は非常に基本的なようですが、動作させることができません。

私はヘッダーなしのレイアウトを作成しようとしています。フッターは常に下部と2つの列にあります。右側の列は固定幅（770ピクセル）を持ち、左側の列は残りのスペースを使用します。左の列にはOpenLayersが使用され、スペースを埋めるためにGoogle Mapsのイメージを取得します。

このページは、小さな画面でも表示する必要があり、FF、Chrome、IE7 +で動作する必要があります。 私は、1200pxの最小幅を持つラッパーから始めています。これは小さな画面用です。スクロールバーが表示されます。 次はラッパーの中に3つのdivを作成しました。左フレーム、右フレーム、下フレームです。

bottom: 0; 
height: auto; 
left: 0; 
overflow: hidden; 
position: fixed; 
right: 0; 
top: auto; 
width: auto; 
min-width: 700px; 
z-index: 5000; 

これは良い作品： bottomframeはこのCSSを使用しました。フッターは常に底にうまくいきます。

問題が発生しました。ビューポートのサイズを変更したり、小さな画面にページを表示すると、残りのスペースを埋めるために左フレームのサイズを変更する必要があります。私はたくさん試しました：浮動、位置。 何動作しているようだと、絶対位置に右側のフレームで、左フレームマージン右に右フレーム（770px）の幅と同じを与える：

#leftframe { 
    width:auto; 
    height: 100%; 
    margin-right: 770px; 
} 
#rightframe { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 770px; 
} 

これは、同様に動作するようです。少なくとも幅のために。

右のフレームは、AJAXを使用して取得したデータで動的に埋められます。返されるデータは、ラッパーに与えた最小の高さよりも大きい場合があります。これは右のフレームでは問題ありません。高さは調整されていますが、ラッパーの高さは調整されていないため、左フレームの高さも調整されません。この結果、左フレームよりも高い右フレームが生成され、左フレームとフッターの間に空白スペースがあります。

これを解決するにはどうすればよいですか？ jQueryなどを使用せずにCSSを使用するのが望ましい。

私はこの数行のjQueryを作成しました。 これらの行は、AJAXデータの処理が終了したときに呼び出されます。

var currentHeightRight = parseInt($("#rightframe").css("height").replace("px", ""), 10); 
var currentHeightWrapper = parseInt($("#wrap").css("height").replace("px", ""), 10); 
if (currentHeightRight > currentHeightWrapper) 
{ 
    $("#wrap").css("height", currentHeightRight); 
    $("#map").css("height", currentHeightRight); 
} 

Answer 1

私が正しくあなたの問題を理解している場合、私はあなたの問題に対処する方法を示すためにフィドルを作りました：

http://jsfiddle.net/zuul/TdTCU/

さらに、ボタンがあります、シミュレートするために、グローバルリサイズ:)

注：

のためのよりよい解決策この種の問題は、ラッパー内の要素の絶対位置です。基本的にすべての残りのための構造を設定する。