CSS ile Yüksekliği 100% Olarak Ayarlamak

HTML sayfaları tasarlarken sabit genişlikler belirtmek için pixel anlamında px birimini kullanırız. Bazen bir katmanın içinde bulunduğu katmanı tamamen doldurması gerekebilir. Genişlik (width) için bir değer belirtmediğinizde div, section, p gibi elemanlar içinde bulunduğu katmanın genişliği kadar genişliğe sahiptir.

Örneğin 150px genişliğinde bir div katmanının içine yeni bir div katmanı eklediğinizde bu sonradan eklenen katmanın genişliği 100% yani 150px olur. Font, span, b gibi genişliği içeriğine bağlı olarak değişen elemanlar için genişlik (width) değerini 100% olarak belirtirseniz bu elemanlar da div, p gibi kapsayan katmanı dolduracaklardır.

Genel olarak web sayfaları için belirli bir yükseklik (height) belirtilmez. İçerik büyüdükçe otomatik olarak sayfanın altına doğru büyümesi beklenir. Çünkü her sayfaya eklenen içerik farklı olacağından içeriğin yüksekliğini önceden bilemeyiz. Sayfa ekrana sığmayacak kadar büyüdüğünde etrafında scroolbars (kaydırma çubukları) görünür ve sayfada aşağı yukarı gezinebiliriz.

Bazen özel amaçlar için ekranın yüksekliğini tam doldurmak isteyebiliriz. Örneğin sol tarafta uzun bir liste ve sağ tarafta da içerik olduğunu düşünürsek sayfa aşağı doğru çok fazla uzayacak ve listenin altlarına inildikçe içeriğin olduğu kısım görünmeyecektir. Bu durumda listenin ve içeriğin yüksekliklerini 100% olarak ayarlayıp "overflow: auto" veya "overflow-y: auto" şeklinde taşma durumunda kaydırma çubuklarının görünmesini istersek liste ve içeriğin olduğu kısımlar iki ayrı sayfa gibi duracak, listede yukarı aşağı gezinirken içeriğin olduğu kısım bu kaydırma işleminden etkilenmeyecektir.

<div style="height: 100%"> şeklinde bir ifade kullandığımızda katmanın yüksekliğinde bir değişiklik olmadığını görürüz. Bunun nedeni html ve body katmanlarının yüksekliklerinin içeriğe göre büyüyecek şekilde tanımlanmış olmasıdır. Yani 100% değildir.

Bu sorunu çözmek için head içine aşağıdaki kodu ekleyin:

<style type="text/css">
html, body { width: 100%; height: 100% }
</style>

HTML ve body etiketlerinin margin ve padding değerlerini 0 (sıfır) olarak ayarlarsanız ekranın tamamını kullandığınızdan emin olabilirsiniz. Body katmanına yan yana ekleyeceğiniz iki katmanın yüksekliklerini 100% olarak ayarlayıp, overflow (taşma) durumunu otomatik (auto) olarak belirttiğinizde yukarıda bahsedilen sayfa yapısını oluşturabilirsiniz.

<head>
html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
.solPanel { float: left; width: 20%; height: 100%; overflow-y: auto }
.sagPanel { float: left; width: 80%; height: 100%; overflow-y: auto }
</head>
<body>
<div class="solPanel">sol genişlik 20%</div>
<div class="sagPanel">sağ genişlik 80%</div>
</body>

Bu blogdaki popüler yayınlar

Almanca - Nomen-Verb-Verbindungen

Web Tasarımı Kodlamak (Front-End)

C ile Dosya Şifreleyici Yapımı