iFrame,% 100 yüksekliğe kadar genişlemiyor

Aşağıda html var. Ve iFrame'in kalanını% 100 ile ekranın geri kalanını kapsamasını istiyorum. Boy özniteliğinde "% 100" ve "*" denedim, ancak çalışmıyor. Neden? TeşekküriFrame,% 100 yüksekliğe kadar genişlemiyor

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
     <div id="container-frame"> 
      <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/> 
      <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/> 
      <a id="if-username" href="/nvthoai">nvthoai</a> 
      <div id="if-box"> 
      </div> 
      <a id="if-close" href="http://www.yahoo.com" target="_top"> </a> 
      <div id="if-link"> 
      </div> 
      <div id="if-star"> 
      </div> 
     </div> 
     <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      </html> 
     </iframe> 
    </body> 
</html> 



#container-frame { 
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0; 
height:35px; 
width:100%; 
}

kaynak

2009-08-12 HP.

Yüksekliğin nedeni:% 100 çalışmıyor çünkü% yüksekliği, ebeveynleri açık (% olmayan) boyuta sahip olmayan çocuklarda çalışmaz. bunu yapar iken

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

Çocuk neyi% 60 demektir bilmez, bu yüzden bunun yerine yükseklik haline gelir: Yani bu işe yaramazsa oto (içine statik içerik tarafından belirlenen yükseklik).

Çocuk, 60em veya% diğer herhangi bir birimin yüzde nasıl anlayacağını bilir.

Bu kuralın bazı istisnaları vardır. Birincisi, hem html hem de gövde elemanlarının yüksekliği verildiğinde:% 100, yüksekliği kullanabilirsiniz:% 100 veya min-yükseklik: Doğrudan bir çocukta% 100. (Boyu deneyebilirsiniz: Pat'ın önerdiği gibi% 96, ancak bunun ekran/tarayıcı yüksekliği başına tamamen farklı değerler olacağını bilin. Beklenmedik boyutlarda içerik kaybedebilirsiniz.)

HTML'yi yanlış okuyamıyorsam, size iki doğrudan çocuğa sahip olmak: iframe ve # container-frame.

Sen görüntü alanının tepesinde kesinlikle konumlandırma # konteyner çerçevesini deneyebilirsiniz (yani ben "z-ekseni üzerinde kullanıcıya daha yakın" demek sayfanın geri kalanı üzerinde oturmak ve "yukarıdaki" seçebilirsiniz) ve iframe% 100 yüksekliğe ayarlanmadıysa ama belki de Pat'ın örneği,% 96 veya bir şey gibi bir şey yapamazsanız, belki de iframe'ye # kap-şasi için görsel oda yapmak için bir miktar üst dolgu verebilirsiniz. Eğer yapmazsanız, iframe tepesi # konteyner-çerçeve tarafından engellenir ve insanlar zirveyi kaçırır. % 100 yüksek bir kutuya üst veya alt kenar boşlukları, dolgu, kenarlık vb. Ekleyemeyeceğinizi bilin. Bu size% 100'den fazla bir şey verir!

% yükseklik kuralının başka bir istisnası, genel olarak kesinlikle yerleştirilmiş öğelerdir. IE6'nın bununla ilgili sorunları dışında,% bir yükseklikleri de olabilir. Yani IE6 için hacklemenin ya da IE6'yı umursamanın bir sakıncası yoksa, muhtemelen hem doğrudan hem de tam olarak çocuk pozisyonu çalışabilir. Genel olarak, her şeyi bir sayfada konumlandırmayı sevmiyorum, ancak böyle bir durumda en kolay olanı olabilir.

kaynak

2009-08-12 11:54:03

Bu, neden genişliğini açıklar:% 100 çalışır? – Brabbeldas

@Brabbeldas Genişlik ve Yükseklik, doğal olarak farklı davranır. Bu benim ilk tahminimden başka bir şey değil, ancak tarayıcının sayfanın toplam genişliğini belirleme yeteneğine sahip olduğunu söyleyebilirim (ya da viewport sınırlaması ya da açık geniş ayarıyla) ancak yükseklik gerektiği gibi büyüyecek ve dolayısıyla açıkça belirtilmedikçe, Tarayıcı% 100'ün ne anlama geldiğini bilemez –

Bu CSS sizin için hile yapmak gerekir olacaktır:

body { 
    margin: 0; 
    padding: 0; 
    overflow-y: hidden; 
}

Ardından% 96 ile iç çerçevenin yüksekliğini ayarlayın. Bu, sayfanın altından itilmesini engelleyecektir.

Bunun nedeni, iframe'deki% 100 yükseklik, kullanılabilir ekran yüksekliğinin% 100'ü olarak hesaplanmasıdır. Iframe'in üzerinde 35 piksel uzunluğunda bir div bulunduğundan, toplam ekran yüksekliğinin ötesinde 35px'lik bir iframe ile sonuçlanırsınız.

kaynak

2009-08-12 03:04:20 Pat

Çok iyi bir örneği var hala sorunum var. Web sitesini görmek istiyorsanız http://web.kucku.vn/u/D –

Evet, bu benim için çalıştı. Main.html sayfamın iki karesi, navigate.html ve content.html var. Main.html gövdesi için CSS'yi kullandım ve işe yaradı. – msinfo

-1

Sadece yerine

Örnek <object> kullanarak deneyebilirsiniz: çoğu kişi (nesne veya iframe kullanarak) güvenlik amacıyla, çerçeveleme her türlü kullanılmamasını tavsiye edeceği

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

Not.

Güncelleme

ben unuttum! Ayrıca, iFrame'i dinamik olarak vücut yüklendikten sonra çalışan bir javascript işlevi kullanarak ayarlamanın bir yolu da olabilir. here.

kaynak

2009-08-12 13:21:39

iFrame,% 100 yüksekliğe kadar genişlemiyor

cevap

İlgili konular