Web アプリのビューには非常に長いテーブルがあるため、それを div でラップして、overflow: auto; max-height: 400px;ユーザーがページ上の他のコントロールを表示したままスクロールできるようにしました。
max-heightJavaScript を少し使用してCSS プロパティを動的に調整し、div がブラウザー ウィンドウの下部まで広がるようにしたいと考えています。この値を決定するにはどうすればよいですか? jQuery ソリューションは問題ありません。
テーブルはページの上部から開始しないため、高さを 100% に設定することはできません。
このようなものがうまくいくと思います：
var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);
私は非常によく似た問題を抱えていましたが、動的なポップアップ要素 (jQuery UI Multiselect ウィジェット) があり、ページの下部に収まらないようにmax-heightを適用したかったのです。ターゲット要素で offset().top を使用するだけでは十分ではありませんでした。これは、ページの垂直方向のスクロール位置では なく、 documentを基準とした x 座標を返すためです。
そのため、ユーザーがページを下にスクロールした場合、offset().top は、ウィンドウの下部に対する相対的な位置を正確に説明しません。ページのスクロール位置を決定する必要があります。
var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});
window.innerHeightウィンドウ全体の高さを表示します。私は最近ほとんど同じことをしたので、それがあなたが必要としていることだと確信しています。:)しかし、私に知らせてください。
編集： CSSを介して特定のポイントに設定されていない限り、結果が得られないことをdocument.getElementById("some_div_id").offsetHeight確認して、オーバーフローしたdivのY値が必要です。正しい「トップ」値を与える必要があります。.style.top.offsetHeight
次に、テーブルのサイズをウィンドウの高さからdivの「top」値を引いた値から、他のコンテンツに必要な任意のウィグルルームを引いた値に設定するだけです。
のようなものですmax-height: 100%が、html と body height 100% を忘れないでください。