Css Calc fonksiyonu temel olarak matamatiksel işlem yapmak için kullanılmaktadır. Css calc fonksiyonunun kullanılışını daha iyi anlatmak için örnek üzerinde çalışmalıyız.
Diyelim ki bir web sayfa tasarımı yapıyorsunuz ve sayfanız dikey olarak ikiye bölünmüş iki kısımdan oluşacak. Bu bölümlerden biri sabit bir çözünürlüğe sahipken diğer bölüm kullanıcının ekran çözünürlüğüne göre dinamik olarak genişleyecek veya daralacak.
Sol bölme 300px genişliğinde menü bölmemiz olsun. Ve sağ bölmemiz dinamik olarak genişliği değişen içerik bölmemiz olsun.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.sol{ width:300px; height:100%; display:block; background-color:#fee; float:left; } .sag{ width:calc(100% - 300px); height:100%; display:block; background-color:#eef; float:left; } |
Açıklama: ‘sol‘ ve ‘sag‘ adinda iki kutu oluşturduk ve yüksekliğini %100 yaptık. Sol kutu 300 px genişliğinde ve sağ kutu css calc fonksiyonu ile 100% – 300px olarak ayarladık.
Oluşturduğumuz iki kutu yan yana ve bütün ekranı kaplayacak şekilde duracaktır.
Aynı şekilde calc fonksiyonunu yükseklikte kullanabilirsiniz. Ek olarak Calc fonksiyonu ile pikseller üzerinde toplama ve çıkarma işlemi yapabilirsiniz.
