Bir öğenin yüksekliğini görünüm penceresindeki mevcut yüksekliğe mi ayarlamak istiyorsunuz?

Question

Öğemin boyu, kullanıcının yaptıklarına bağlı olarak artar. Bir sarmalayıcı div verirsem ve bu divu açık bir piksel yüksekliğine ve overflow:auto verirsem, istediğim gibi çalışır (öğe üst öğenin yüksekliğinden daha büyük olduğunda, üst öğenin boyutunu büyütmez)). Sarmalayıcı div'in sayfada bulunan alan kadar büyük olmasını istiyorum, ancak bunun ötesine geçmesine izin vermeyin. height:100%'u vermek işe yaramıyor, sadece daha büyük oluyor. height:100vh'u vermek de işe yaramıyor çünkü sayfada başka öğeler var ve boyut çok büyük.

Sarmalayıcı bölmesinin, görünüm penceresi için çok büyük olana kadar genişletilebilmesini istiyorum (bu, sayfadaki diğer öğeler için değilse height:100vh'un elde edeceği).

Temel olarak height : amount of available space in the viewport gibi bir şey arıyorum.

Answer 1

Bu yaptığım sona erdi budur. gridWrapper, kaydırma divunun kimliğidir.

Answer 2

sen height:80vh kullanabilir veya benzer diğer elemanlar

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); 
}); 

Bu deneyebilirsiniz yüksekliğine bağlıdır. Var yüksekliğinde hangi değere ulaştığınızı kontrol etmeniz gerekebilir. Buna bağlı olarak, gerekli veya daha fazla px ekleyemezsiniz. Bu temelde mantıktır.

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

Ben boyutlandırma tekrar aynı şeyler çalıştırın: