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

www.mvmedya.net

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


Bu tarz jquery kodları var ama bir çoğu yükseliği ayarlasa da sayfanızı yenilemeden aktif olmuyor.
Yukarıda size verdiğim kodlar anlık (ekran)sayfa yüksekliğinize göre ayarlama yapar.

 

 

 

 

 

 

 


Herkese Kolay Gelsin