Div Yüksekliğini %100 (height) Yapmak

– Bir div iniz var ve hangi ekran çözünürlüğünde bakılırsa bakılsın yüksekliğinin 100% olmasını istiyorsunuz.
– 2 Adet div iniz var yan yana. 2 div’in yükseklikleri birbirine eşit olması gerekiyor diyelim. Vereceğim Jquery kodları ile bunuda yapabilmeniz mümkün.

Kısacası aşağıdaki Jquery kodları ile bir çok işinizi halledebilirsiniz. İhtiyaca ve yaratıcılığınıza kalmış.

— BURADA ‘.yuzdeyuzolacak-div-tanimi’ bu div imizin yükseliği ‘window'(ekranınız) kadar olacaktır. İçerik uzun olursa diyenler, sıkıntı çıkarmaz sayfanız aşağıya doğru uzar.—

function boyutlandir() { 
  var winheight = $(window).height(); // pencere Yüksekliği
  $('.yuzdeyuzolacak-div-tanimi').css({'min-height': winheight}); 
}
boyutlandir()
$(window).resize(boyutlandir);
$(document).ready(function(){  
  boyutlandir();    
});

— Diyelim ki, 2 Div var, içerik bakımından biri daha uzun ama estetik bir görünüm için eşitlemek istiyorsunuz.—

function boyutlandir() { 
  var winheight = $('.uzun-olan-div').height(); // pencere Yüksekliği
  $('.kisa-olan-div').css({'min-height': winheight}); 
}
boyutlandir()
$(window).resize(boyutlandir);
$(document).ready(function(){  
  boyutlandir();    
}); //Eşitledik bile

— Daha birçok şeyde kullanabilmeniz için aşağıdaki farklılıklarıda incelemeniz yararınıza olacaktır..—

function boyutlandir() { 
  var winheight = $('.uzun-olan-div').height(); // pencere Yüksekliği
  $('.kisa-olan-div').css({'min-height': winheight, 'height': winheight+5}); 
}
boyutlandir()
$(window).resize(boyutlandir);
$(document).ready(function(){  
  boyutlandir();    
});

Yukarıda size verdiğim kodlar anlık (ekran)sayfa yüksekliğinize göre ayarlama yapar.

Herkese Kolay Gelsin