iframe% 100 yükseklik dikey kaydırma çubuğuna neden oluyor

Ekranın üst kısmında sabit yükseklik üstbilgisine sahip bir tasarım ve ardından kalan alanı kaplayan bir iframe yerleştirmeye çalışıyorum.iframe% 100 yükseklik dikey kaydırma çubuğuna neden oluyor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style> 
    </head> 
    <body> 
    <div style="height:70px;background-color:blue;"></div> 
    <div style="position:absolute;top:70px;bottom:0;left:0;right:0;"> 
     <iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe> 
    </div> 
    </body> 
</html>

Esasen, o zaman orada tam boy iframe koyarak, başlığın altında kesinlikle konumlandırılmış div oluşturma ve alanı geri kalanı almak için boyutlandırma ediyorum şu şekildedir: Ben ile geldi çözümdür .

İçinde bulunduğum sorun şu ki, kodu tam olarak aşağıda görüldüğü gibi yapıştırırsanız, XHTML Strict'i kullanarak, her tarayıcıda (w/chrome/safari/ie8 olarak test edilmiş) birkaç tane dikey kaydırma çubuğu görürsünüz. div altında beyaz boşluk pikselleri.

Bazı deneme yapmak, doctype'ı tamamen kaldırırsam, safari/krom'da çalışır, ancak IE'nin daha da kötüleştiğini ve iframe yüksekliğinin 300 piksele ayarlandığını buldum. Eğer doctype'ı geçişe ayarlarsanız, safari/kromda çalışır, ancak IE8 için katı durumda olduğu gibi aynı problemi vardır. HTML5 doctype kullanırsam, tüm tarayıcılarda aynı sorunla aynıdır.

Son olarak, iframe'i bu gibi durumlarda kaldırırsam her şey yolunda gider.

Herhangi bir fikri olan var mı?

kaynak

2010-05-25 Keevon

ekleme CSS gövdesi {taşma-y: gizlenmiş;}

dikey kaydırma kaldırır. IFrame içeriği sayfa boyutunu aşarsa, iframe sayfa yerine kaydırma çubuğu alır.

kaynak

2010-05-25 06:47:24 Daveo

Teşekkürler, bu hile yaptı! Sadece meraktan, ekstra içeriğin neden ortaya çıktığı hakkında bir fikrin var mı? Kavramsal olarak her şey sayfa içinde uygun olmalı. – Keevon

IE'nin harika dolgu/kenar boşluğu hatalarından biri - Eminim ki ... –

Harika. Teşekkür ederim. Bu çalışmayı denemek için can sıkıcı uzun aramada bulmacanın eksik parçasını verdin. Ne yazık ki, IE 6 ve 7'de (IE 8 hakkında bilmiyorum) hala bir IE stili kullanmak zorunda kaldım: 'height: expression ((document.body.offsetHeight - 25) + 'px');'. Ama ben buna iyiyim. Firefox ve diğer tarayıcılar bu stili görmezden geliyor. Neyse ki benim başlık çubuğum sabit boyutlu. Aksi takdirde, document.body.offsetHeight - document.getElementById ('headerbar'). OffsetHeight' veya bunlardan bazılarını kullanmam gerekir. – ErikE

iframe% 100 yükseklik dikey kaydırma çubuğuna neden oluyor

cevap

İlgili konular