要素の高さをビューポートで使用できる高さに設定しますか？

Question

私の要素の高さは、ユーザーの操作に応じて増加します。私はそれにラッパーdivを与え、そのdivに明示的なピクセルの高さとoverflow:autoを与えれば、それは私が望むように動作します（要素が親の高さより大きくなると、親のサイズを増加させません）。私は、ラッパーdivがページ上で利用可能なスペースと同じ大きさであることを望みますが、それを超えて拡大することはできません。それを与えることはheight:100%、それはちょうどより大きくなる。それにはheight:100vhもありません。ページに他の要素があり、サイズが大きすぎるためです。

ラッパーdivがビューポート（ページ上の他の要素でない場合はheight:100vh）には大きすぎるまで拡大できるようにします。

基本的にはheight : amount of available space in the viewportのようなものをお探ししています。

Answer 1

これは私がやってしまったものです：

var viewportHeight = $(window).height(); 
var offset = $('#gridWrapper').offset().top; 
$('#gridWrapper').height(viewportHeight - offset); 

私はリサイズで再び同じものを実行します。 gridWrapperは折り返しdivのIDです。

Answer 2

あなたがheight:80vhまたは類似を使用することができますあなたはこれを試すことができ、あなたの他の要素

Answer 3

function resizeElement() { 
var height = $(window).height(); 
var neededHeight = (70 * height)/100; //If you want 70% of the viewport 
neededHeight = parseInt(neededHeight) + 'px'; 
$("div").css('height',neededHeight); 
} 
$(document).ready(function() { 
resizeElement(); 
$(window).bind('resize', resizeElement); 
}); 

の高さに依存します。あなたはvarの高さでどのような価値を得るのかを確認する必要があるかもしれません。それに応じて、pxを追加することもできますし、neededHeightに追加することもできません。これは基本的に論理です。