0

サイドバーのあるウェブアプリを作成していますが、サイドバーを常にこのようにビューポートに配置したいと思います image1

また、アプリがフルスクリーンモードのときにビューポートに適合します。jqueryでこれを達成するにはどうすればよいですか？ドキュメントの高さからヘッダーの高さを差し引いてみました

$(document).ready(function() {
        var bodyheight = $('body').height();
        $(".app-sidebar").height(bodyheight);
    });

    // for the window resize
    $(window).resize(function() {
        var bodyheight = $(document).height();
        var header = $('.app-north').innerHeight();
        $(".app-sidebar").height(bodyheight - header);
    });
4

1 に答える 1

1

css position:fixed を使用して、サイドバーに最小高さ: 100% を指定しない理由。ウィンドウのサイズ変更時にjQueryまたはjavascriptを使用してdivのサイズを変更すると、非常に不安定になります。とにかく、ビューポートの高さを取得するには、 では$(window).heightなく を使用する必要がありますdocument。動作するはずの関数は次のとおりです。

var prev,
  const_header_height = $('.app-north').innerHeight(),
  $app_sidebar = $('.app-sidebar'); // get the element first to avoid hitting the DOM each call of resize()

function resize () {
  var curr = $(window).height()
  // only resize if new height is different
  if (curr != prev) {
    $app_sidebar.height(curr - const_header_height);
    prev = curr;
  }
}

$(window).on("resize", resize)
$(document).ready(resize)
于 2013-01-26T00:40:36.647 に答える