2

ラッパーに 2 つの div が含まれており、そのサイズは本体の高さに比例します。div の 1 つは固定の高さを持ち、もう 1 つはラッパー div を埋めて、オーバーフローしたコンテンツをスクロールできるようにすることになっています (内側の div のみ)。

フィドル: http://jsfiddle.net/HvC7K/

いつもは「#contactlist」の高さをjQueryで計算しているのですが、今回はレスポンシブなページにする必要があります。ブラウザ ウィンドウのサイズを変更すると、「#contactlist」が定義された高さで動かなくなります。体のサイズが変わるたびに高さを再計算する必要がありますか、それとも CSS でそれを行う方法はありますか?

ありがとうございました！

4

3 に答える 3

1

私は前向きではありませんが、絶対的なポジショニングを使用したいと思います。

JSFiddleデモ

設定することもできoverflow: auto;、必要な場合を除いてスクロールバーは表示されません。

于 2012-04-17T17:15:04.407 に答える
1

これがjQueryソリューションです

#contactlist CSS の高さ調整:

#wrapper { width: 200px; height: 400px; border: 4px solid black; }
#header { height: 50px; border: 2px solid red; }
#contactlist { overflow: scroll; height: 344px; border: 2px solid blue; }

(連絡先リストの高さのみを変更)

jQueryコード（あなたのものを置き換えてください）：

h = $('#wrapper').height() ;

windowh = $(window).height();

$(window).resize(function(){

  var newh = h + ($(this).height() - windowh);
  $('#wrapper').height(newh);
  $("#contactlist").height(newh-56); //56 = 50 for header + 6 for border

});

このコードを使用すると、ウィンドウのサイズ変更と同時に、スクロールを使用して#wrapper両方の高さを増減できます。#contactlist

フィドルのデモ: http://jsfiddle.net/ajp9h/

于 2012-04-17T18:52:03.500 に答える
0 
#wrapper { width: 200px;border: 4px solid black; }
#header { height: 50px; border: 2px solid red; }
#contactlist { overflow: visible; border: 2px solid blue; }

ラッパーの高さを削除して使用overflow:visible;

これがあなたの望むものかどうかわかりません

Jsfiddleデモ

于 2012-04-17T17:06:44.247 に答える