Builder

web application developer blog

Div’in yüksekliğinin sayfa genişliği ile orantılı değişmesi

Html ve CSS yazarken, bazen, böylesine basit ve temel ihtiyaçların nasıl olup da düşünülemediğini herkes kendi kendine sormuştur.
Evet malesef, div için 100% gibi bir yükseklik değeri çalışmamakta. Bu noktada küçük hileler ile bunu biz yapmak zorunda kalıyoruz.

Şöyle bir html’imiz olsun

Bu div için ürettiğimiz css ise şöyle olsun:

sonuç:

Başlık

Lorem ipsumm dolor sit amet

Malesef, sadece genişiliği sayfa genişliği ile orantılı olarak değişiyor yükseklik sabit. İşte bu temel probleme karşılık yapmamız gereken şey, margin özelliğni kullarak, sayfa genişliğiyle orantılı olarak div yükseklğini değiştirmek.

Yeni modelde html şöyle olmalı:

ve bu html için, yazmamız gereken css de şöyle olmalı:

ve elde etmemiz gereken sonuç:

Başlık

Lorem ipsumm dolor sit amet

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir