1

固定位置のサイドバーを作ろうとしています。以下で構成されています。

  • 高さが固定されたヘッダー。
  • 動的コンテンツを含む div (ppl とその詳細のリスト)。
  • チャットエリア付きの div (これも動的)。
  • 入力と送信ボタンのあるフッターで、常に下部に配置されます。

数時間後、私はこれを持っています: http://jsfiddle.net/Nippon/cVnDf/

var $window = $(window),
    $wrapper = $('.chat');

$window.resize(function(){
      $wrapper.css({
          height: $window.height() * 0.55 - 105 + "px"
      });
}).resize();

私が意図したように完全に機能していません（jqueryの新機能です）。チャット div の高さを常に画面いっぱいに設定し、解像度を小さくしてサイズを変更/ウィンドウのサイズを変更し、名前ブロックの展開/折りたたみと削除/追加に対応するにはどうすればよいですか (常に 3 つのブロックがあるとは限りません)。

4

1 に答える 1

1

何をするつもりだったのかわからない* 0.55。残りのスペースをチャットで埋めたい場合は、次のように、ウィンドウの高さの合計から他の要素の高さを差し引くだけです。

$window.height() - $(".topWrapper").outerHeight() - $(".sendArea").outerHeight()

outerHeight()マージンとパディングを考慮して使用しています。

また、サイズ変更やメニューの展開などに適用できる高さを適用する別の関数を作成する方が簡単だと思います。

--

編集:高さが正確になるように、トグル アニメーションが終了した後にsetHeight が起動することも確認する必要があります。これを試して：

var $window = $(window),
$wrapper = $('.chat');

function setHeight() {
    th = $(".topWrapper").outerHeight();
    sa = $(".sendArea").outerHeight();
    $wrapper.css("height", $window.height() - th - sa - 20);
}

$window.resize(function(){
    setHeight();
}).resize();

$(".daneExpand").click( function() {
    $('.dane').not($(this).next()).slideUp(400);
    $(this).next().slideToggle(400, setHeight);
});
于 2013-07-15T19:25:29.233 に答える