1

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

ヘッダーなし、常に下部にフッター、2列のレイアウトを作成しようとしています。右の列の幅は固定（770px）で、左の列は残りのスペースを使用する必要があります。左側の列では、スペースを埋めるためにGoogleマップの画像をフェッチするOpenLayersが使用されます。

このページは小さい画面でも表示できる必要があり、FF、Chrome、IE7+で機能する必要があります。最小幅が1200pxのラッパーから始めています。これは小さい画面用です。スクロールバーが表示されます。次に、ラッパー内に3つのdivを作成しました：leftframe、rightframe、bottomframe。ボトムフレームはこのCSSを使用しました：

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

これはうまくいきます。フッターは常に下部にあります。

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

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

これもうまくいくようです。少なくとも幅については。

右側のフレームには、AJAXを使用して取得したデータが動的に入力されています。場合によっては、返されるデータがラッパーに指定した最小の高さよりも大きいことがあります。これは右側のフレームには問題ありません。高さは調整されますが、ラッパーの高さは調整されないため、左側のフレームの高さも調整されません。これにより、右のフレームが左のフレームよりも高くなり、左のフレームとフッターの間に空白ができます。

これを解決する方法は？jQueryなどを使用せずに、CSSのみを使用することをお勧めします。

[編集]Zuulが提供する例を使用して、これらの数行の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);
}
4

1 に答える 1

2

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

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

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

ノート：

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

于 2012-05-03T10:29:15.903 に答える