Web sitesi tasarımında sıkça sorulan bir soru "bir öğenin yüksekliğini% 100'e nasıl ayarlarsınız?"
Bu kolay bir cevap gibi görünebilir. Bir öğenin yüksekliğini% 100'e ayarlamak için CSS'yi kullanırsınız, ancak bu, bu öğeyi her zaman tarayıcı penceresinin tamamına sığacak şekilde genişletmez. Bunun neden olduğunu ve bu görsel stile ulaşmak için neler yapabileceğinizi öğrenelim.
Piksel ve Yüzdeler
CSS özelliğini ve piksel kullanan bir değeri kullanarak bir öğenin yüksekliğini tanımladığınızda, bu öğe tarayıcıda çok fazla dikey alan kaplar.
Örneğin, yüksekliğe sahip bir paragraf: 100px; tasarımınızda 100 piksel dikey alan kaplayacak. Tarayıcı pencerenizin ne kadar büyük olduğu önemli değil, bu öğe 100 piksel yükseklikte olacak.
Yüzdeler piksellerden farklı çalışır. W3C spesifikasyonuna göre, yüzde yükseklikleri, konteynerin yüksekliğine göre hesaplanır. Yani bir paragrafı bir yüksekliğe koyarsanız:% 50; 100px'lik bir yüksekliğe sahip bir div içinde paragraf, üst öğenin% 50'si olan 50 piksel yüksekliğinde olacaktır.
Yüzde Yükseklik Başarısız Neden Olur?
Bir web sayfası tasarlıyorsanız ve pencerenin tam yüksekliğini almak istediğiniz bir sütuna sahipseniz, doğal eğim bir yükseklik eklemektir:% 100; bu öğeye Sonuçta, genişliği genişliğe ayarlarsanız:% 100; Öğe sayfanın tam yatay alanını alacaktır, bu nedenle yükseklik aynı şekilde çalışmalıdır, değil mi? Ne yazık ki, bu hiç de böyle değil.
Bunun neden olduğunu anlamak için tarayıcıların yükseklik ve genişliği nasıl yorumladığını anlamalısınız. Web tarayıcıları, tarayıcı penceresinin ne kadar geniş açıldığının bir fonksiyonu olarak toplam kullanılabilir genişliği hesaplar. Belgelerinize herhangi bir genişlik değeri koymazsanız, tarayıcı pencerenin tüm genişliğini doldurmak için içeriği otomatik olarak aktaracaktır (% 100 genişlik varsayılan değerdir).
Yükseklik değeri genişlikten farklı hesaplanır. Aslında, tarayıcılar, içeriğin viewport'un dışına çıktığı (bu nedenle kaydırma çubukları gerektirecek kadar uzun) veya web tasarımcısının sayfadaki bir öğe için mutlak bir yükseklik ayarlamasına izin vermediği sürece, tarayıcılar yüksekliğini değerlendirmez. Aksi takdirde, tarayıcı, içeriğin sonuna kadar görüntü alanının genişliğinde içeri akmasına izin verir. Yükseklik aslında hiç hesaplanmaz.
Yükseklik ayarlanmayan ana öğelere sahip bir öğeye yüzde bir yükseklik ayarladığınızda, diğer bir deyişle, ana öğelerin varsayılan bir yüksekliğe sahip olduğunda sorunlar oluşur: otomatik; . Aslında, tarayıcıdan tanımlanmamış bir değerden bir yükseklik hesaplamasını istesiniz. Bu bir null değerine eşit olacağından, sonuç tarayıcı hiçbir şey yapmaz.
Web sayfalarınızda bir yüksekliğe bir yüzde ayarlamak istiyorsanız, yüksekliğin tanımlanmasını istediğiniz her ebeveyn öğesinin yüksekliğini ayarlamanız gerekir. Başka bir deyişle, böyle bir sayfanız varsa:
Burada içerik
Büyük olasılıkla div ve onun paragrafının% 100 yüksekliğe sahip olmasını istiyorsunuz, ancak bu div aslında iki ana öğeye sahip:
ve. Divanın yüksekliğini göreceli bir yüksekliğe tanımlamak için, vücut ve html öğelerinin yüksekliğini de ayarlamanız gerekir.
Yani sadece div değil, aynı zamanda vücut ve html öğelerinin yüksekliğini ayarlamak için CSS kullanmanız gerekir. Bu, bir meydan okuma olabilir, çünkü her şeyin% 100 yüksekliğe ayarlanmış olması ile hızla boğulur, sadece bu istenen etkiyi elde edersiniz.
% 100 Yükseklikte Çalışırken Dikkat Edilmesi Gereken Bazı Şeyler
Artık sayfa öğelerinizin yüksekliğini% 100'e ayarlamayı öğrendiğinize göre, dışarı çıkıp tüm sayfalarınıza bunu yapmak heyecan verici olabilir, ancak bilmeniz gereken birkaç şey vardır:
- Kenar boşlukları ve dolgu, istemediğiniz bir kaydırma çubuğu ekleyebilir. Yüzde yüksekliklerle (ve genişliklerde) çalışarak bulduğum en can sıkıcı şeylerden biri, tüm içerikler kaydırma çubuklarına gerek duymasa bile, aynı öğelerdeki dolgu ve kenar boşlukları sayfaya kaydırma çubukları ekleyebilmesidir. Bunun nedeni, öğenin yüksekliği veya genişliğinin hesaplanan ilk şey olmasıdır. Daha sonra marjlar ve yastıklar eklenir. Dolayısıyla,% 100 yüksekliğe ve 10 piksel üst ve alt kenar boşluklarına sahip bir öğeniz varsa, fazladan 20 piksel için bir kaydırma çubuğu olacaktır. Unutmayın, CSS kutusu modeli, bir elemanın boyutuna kenar boşluğu, kenarlık ve dolgu ekler, bu yüzden diğer kutu model değerlerinden herhangi biriyle% 100, aslında% 100'den fazla olacaktır.
- İçeriğiniz tanımlı yükseklikten daha fazla alıyorsa, bundan sonra herhangi bir şeyin üzerine yazacaktır. Diğer bir deyişle, yükseklikte% 80'lik bir sütunlu bir tasarıma sahipseniz ve içeriğindeki içerik yüksekliğin% 100'ünü kaplayacaksa,% 20'lik ek sütunun altında devam edecek ve görsel tasarımı bozacaktır. sayfanızın Bu sütunun altında içerik varsa, metin sadece bunun üzerine yazacaktır. Bir web tasarımcısının bir sayfanın yüksekliğini zorlamaya çalıştığı ve onu mükemmel bir şekilde çalışmaya başladığında bunu görüyorum. Ancak, bu sayfadaki içerik gelecekte değiştiğinde, mutlak yükseklikleri sayfanın akışını tamamen kırıyor. Genişliği ve yüksekliği görünümün büyüklüğüyle değişmesi gereken duyarlı web siteleri oluştururken bu durum iki kez doğrudur.
Bunu düzeltmek için, elemanın yüksekliğini de ayarlayabilirsiniz. Otomatik olarak ayarlarsanız, gerektiğinde kaydırma çubukları görünür, ancak olmadıklarında kaybolur. Bu görsel arayı düzeltir, ancak istemeyeceğiniz kaydırma çubukları ekler.
Viewport Birimlerini Kullanma
Bu sorunu çözmenin başka bir yolu da CSS Viewport Birimleri ile deneme yapmaktır. Viewport yükseklik ölçüm birimini kullanarak, görünümün tanımlı bir yüksekliğini almak için öğeleri boyutlandırabilirsiniz ve bu, görünüm değiştikçe değişecektir! Bu, bir sayfada% 100 yükseklik görsellerinizi elde etmenin harika bir yoludur, ancak yine de farklı cihazlar ve ekran boyutları için esnek olmalarını sağlar.