İframe kabı %100 sağlıklı yapmak için'In kalan yükseklik

SORU

28 Kasım 2008, Cuma

İframe kabı %100 sağlıklı yapmak için'In kalan yükseklik

Bir banner ve iframe ile web sayfası tasarlamak istiyorum. İframe kalan tüm sayfa yüksekliği doldurun ve tarayıcı yeniden boyutlandırma otomatik olarak yeniden boyutlandırılabilir umarım. İşi Javascript kodu, sadece CSS ile yazmaya gerek kalmadan almak mümkün mü?

Denedim set height:100% iframe sonuç oldukça yakın ama iframe çalıştı doldurmak için tam sayfa yüksekliği de dahil olmak üzere 30px yükseklik banner div elemanı, yani bende gereksiz dikey kaydırma çubuğu. Mükemmel değil.

Güncelleme Notları: İyi anlatan soru için kusuruma bakmayın, CSS marjı çalıştım, dolgu DİV web sayfasının tüm remining yüksekliği başarılı bir şekilde işgal etmek öznitelik, ama hile iframe işe yaramadı.

<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>

Herhangi bir fikir takdir edilmektedir.

CEVAP

28 Kasım 2008, Cuma

Hile 0 alınır ne olduğunu anlamak için. CSS özellikleri okuma yardımcı olabilir.

Uzun lafın kısası - "gerekli değil ana öğe olan." - içeren blok diye bir şey yoktur yapmak için Sadece dedi, konumu hiyerarşi:akraba veya position:absolute ilk unsurdur. Ya da body öğesi kendisi eğer başka bir şey varsa. Derken, "genişlik:" denetler genişliği "" ve senin elemanın genişliğini ayarlar aynı boyutta. içeren blok 100% Eğer başka bir şey varsa, o zaman bir içeriği olabilir "" o kendisinden daha büyük olan (böylece "") taşan. içeren blok

Yükseklik aynı şekilde çalışır.Bir istisna dışında. Tarayıcı penceresinin 100% yükseklik alamazsın. Hangi karşı 0 hesaplanabilir çok üst düzey öğesi, vücut (veya html. emin değilim) eleman ve içeriğini içermesi için yetecek kadar uzanır. Yükseklik:100% belirtme üzerinde olduğundan hiçbir etkisi olmayacaktır hayır "" 100% ölçmek hangi karşı. üst öğe Pencere kendisi sayılmaz. ;)

Bir şey tam olarak pencerenin 100% streç yapmak için, iki seçeneğiniz vardır:

JavaScript Kullanın
DOCTYPE kullanmayın. Bu iyi bir uygulama, ama koyar tarayıcılarda "tuhaflıklar modu", hangi yapmak height="100%" öğeleri ve streç onlara pencere boyutu. Sayfanızı geri kalanı muhtemelen de değiştirilmesi DOCTYPE değişiklikleri için uyum içinde açılacaktır.

Güncelleme:Eğer zaten bu mutlaka yanlış olmasaydım emin değilim, ama bu kesinlikle eski. Senin stil bunu yapabilirsiniz bugün: html, body { height: 100% } ve aslında sizin görünüm penceresi bütün uzatmak olacaktır. Bir DOCTYPE bile. min-height: 100% da yararlı durumunuza bağlı olabilir.

Ve Bentuhaflıklar modu belge . bir yapmak için kimseye tavsiye etmem onları çözer daha fazla baş ağrısı neden olur, çünkü artık ya. Her tarayıcı farklı tuhaflıklar modu, tarayıcılar büyüklükte iki emir olur boyunca sürekli bakmak için sayfanızı daha da zorlaşıyor. Bir DOCTYPE kullanın. Her zaman. Tercihen HTML5 - <!DOCTYPE html>. Hatırlaması kolay ve tüm tarayıcılarda bir cazibe, hatta 10 yıl gibi eskileri çalışır.

Tek istisna IE5 falan gibi bir şey destek alabilir. Eğer oradaysan, o zaman yalnız değilsin zaten. Bu eski tarayıcıları tarayıcıları gibi bir şey, bugün burada verilen küçük bir tavsiye onlara yardımcı olacaktır. Eğer oradaysan parlak tarafında, muhtemelen sadece BİR uyumluluk sorunları kurtulur tarayıcı, biraz destek gerekiyor.

İyi şanslar!

Bunu Paylaş: